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: ``` ``` 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?

Accepted Answer

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

jQuery Animate callback not invoked after animation performed?

Solution

Problem