My slider moves back and forth between divs when a link is clicked. It works perfectly until I add overflow: hidden, then everything falls apart!
I have put together a sample demonstration for anyone to explore. You can see that it functions, but if you try adding overflow: hidden to the .clickWrapper div to conceal the sliding divs, it will malfunction. When you click on one of the options, it will skip past other divs.
$(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; }