jQuery Animate callback not invoked after animation performed?

Question

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?

score 6 · Accepted Answer · edited Oct 29 '14 at 23:36

6

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

edited Oct 29 '14 at 23:36

Mike Kormendy

3,389
2
24
21

answered May 31 '12 at 01:14

N1ck

2,001
16
23

Well, I feel silly. I could've sworn that the changes were separate from the properties of the animation. Thanks a bunch! – VictorKilo May 31 '12 at 01:17
Haha, no worries. If you could make it the chosen answer that would be great :) – N1ck May 31 '12 at 01:18
1

yeah, there's a waiting period before you can accept an answer. I've got my eye on the countdown :) – VictorKilo May 31 '12 at 01:18
1

I had the same problems, I was following the jQuery parameter format in their examples and the syntax suggested to do it the way that the asker had shown in his example. Solution: all of the parameters and options can be strung up into one parenthesis group, separated by commas. – Mike Kormendy Oct 29 '14 at 22:55

jQuery Animate callback not invoked after animation performed?

1 Answers1