我有一个滑块,当你点击链接时在div之间来回弹跳。它一直有效,直到你添加了
我创建了一个demo供任何人查看。你会注意到它是有效的,但尝试将
overflow: hidden
,然后一切都崩溃了!我创建了一个demo供任何人查看。你会注意到它是有效的,但尝试将
.clickWrapper
div添加overflow: hidden
以隐藏正在滑动的div,它就会崩溃。当你点击想要的那个时,它会滚过其他的div。
$(function() {
$(".clickIt a").click(function() {
var linked = $(this).attr("href");
var pos = $(linked).position();
$(".clickSlider").stop().animate({
left: -pos.left,
}, 500);
});
});
<div id="wrapper">
<div class="clickIt">
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
</div>
<div class="clickWrapper">
<div class="clickSlider">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
</div>
</div>
#wrapper {margin: 0 auto; width: 200px; }
.clickWrapper {background:red; position:relative; overflow:hidden; background-color: #CCC; height: 200px; }
.clickSlider { position: relative; width: 600px; }
#one, #two, #three { float: left; width: 200px; }