I'm using jQuery .animate()
to create an infinite carousel. I've used .animate()
before without any issues. This time however, the animation is not completing.
It's a very simple animation, changing margin-left
to a different value. The value changes, and to me it looks as though it is complete, but the function does not fire.
Here's my code:
<script type="text/javascript">
$("#scrollLeft").click(function(){
$("#scrollContent").animate(
{'margin-left':'-714px'},
{queue:false, duration:500},
function(){
alert("finishedLeft");
});
});
$("#scrollRight").click(function(){
$("#scrollContent").animate(
{'margin-left':'-1190px'},
{queue:false, duration:500},
function(){
alert("finishedRight");
});
});
</script>
The problem area is the carousel at the bottom of the page. I am running off of jquery-1.7.1.min.js
.
I guess my main question is, what could be preventing this function from firing, even though it seems as though the event is complete?
http://jsfiddle.net/n1ck/HBCn5/
$("#scrollLeft").click(function() {
$("#scrollContent").animate({
'margin-left': '-714px', // don't close out the parameters with parentheses yet ...
queue: false, // continue adding the queue option (if needed)
duration: 500 // and the duration option (if needed) and close after
}, function() {
alert("finishedLeft");
});
});
$("#scrollRight").click(function() {
$("#scrollContent").animate({
'margin-left': '-1190px', // same as above
queue: false,
duration: 500
}, function() {
alert("finishedRight");
});
});