Hello,
Im working on this little slider effect and Im having trouble getting the boxes to stop once they are clicked. Please help, Im still somewhat of a noob.
Here is the code if this helps.
Thank you kindly.
<!--the code-->
<div><a id="aOne" href="#">Div One</a><a id="aTwo" href="#">Div Two</a><a id="aThree" href="#">Div Three</a></div>
<div class="slider" id="div1" >
</div>
<div class="sliderTwo" id="div2" >
</div>
<div class="sliderThree"
style="position:absolute;width:150px;height:150px; top:150px;left:4000px;background- color:#555" id="div3" >
</div>
<!-- Javascript begins-->
<script>
$(function () {
var current = null;
$("#aOne").click(function () {
trade($("#div1"));
});
$("#aTwo").click(function () {
trade($("#div2"));
});
$("#aThree").click(function () {
trade($("#div3"));
});
var trade = function (el) {
$(".current").animate({ left: -400 }, 300, "linear",
function () {
$(this).css("left", "4000px").removeClass("current");
});
el.addClass("current");
el.animate({
left: 350
}, 550);
}
});
</script>