jqueryjquery-animateinfinite-carousel

jQuery Animate callback not invoked after animation performed?


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?


Solution

  • Watch your syntax.

    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");
        });
    });​    ​