jQuery animate not firing callback function

Question

I have the following jQuery animate function:

$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' }, 
    function () {
        alert('hi');
    }
);

The animation itself works. $myDiv slides with the easeInOutExpo effect, as desired. However, the callback function is never fired. To test it, I changed the callback to just alert("hi");, as you can see above. Still doesn't work.

What could I be doing wrong?

Unless you've set `$myDiv` to equal `$("#myDiv")`, it should be the latter. — AstroCB, Jul 14 '14 at 00:25
@AstroCB Yeah, $myDiv is equal to that. It's dynamic and changes which is why it's a variable. It is properly set and the animation does work. Just not the complete function. — Nullqwerty, Jul 14 '14 at 00:36

score 4 · Accepted Answer · answered Jul 14 '14 at 00:36

4

Try this

Demo: jsFiddle

  $("#myDiv").animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' , 
    complete:function () {
        alert('hi');
    }
   }
);

answered Jul 14 '14 at 00:36

Dola

1,483
11
16

That was it! Thanks @Dola Know why that's the case (why you had to specify complete:)? Thanks again! – Nullqwerty Jul 14 '14 at 00:39
@Nullqwerty Well, You can always refer to the jQuery documentation for usage examples. You can check it [here](http://api.jquery.com/animate/) – Dola Jul 14 '14 at 00:52
I had been. But didn't understand about mixing formats as @AstroCB described below. Now I do. Thanks – Nullqwerty Jul 14 '14 at 00:55

score 3 · Answer 2 · answered Jul 14 '14 at 00:46

There are a couple of things that need fixing here:

Make sure you've included jQuery UI in your code, because easeInOutExpo is not part of the standard jQuery library.
Your syntax is wrong: you're mixing up the two different options for the animate() function.

It's either

$(element).animate(properties [,duration] [,easing] [,complete]);

or

$(element).animate(properties, options)

where options is an object formatted like this:

{
  duration: number,
  easing: string,
  complete: function,
}

You've gone with the second option, so you need to format it properly to use the complete attribute of the options object for your function:

$myDiv.animate({
    "left": "0%",
}, {
    duration: 1000,
    easing: "easeInOutExpo",
    complete: function () {
        alert('hi');
    },
});

Demo

Alternatively, you could use the first format option:

$("#myDiv").animate({
    "left": "0%",
}, 1000, "easeInOutExpo", function () {
    alert('hi');
});

Demo

Thanks @AstroCB I'm new to JQuery and just learning about the formatting that you described. Thanks for the tips. I do have the easing library in there (like I was saying, that part of it worked fine). But the format piece of it is why the callback function wasn't working as Dola pointed out above. Thanks again. Your explanation helped me greatly understand. Didn't realize there were issues of mixing formats. Now I do. Thanks — Nullqwerty, Jul 14 '14 at 00:55
@Nullqwerty No problem; I'm glad I could help. I'd recommend taking a look through the [jQuery API docs](http://api.jquery.com), as it does a great job of laying out the varying syntax and requirements of each piece of the library. — AstroCB, Jul 14 '14 at 00:59

score 0 · Answer 3 · answered Jul 15 '19 at 15:27

0

One way is use of JQuery Promise

$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' }).promise().done(function(){

     alert('hi done');

});

answered Jul 15 '19 at 15:27

Dev Matee

5,525
2
27
33

jQuery animate not firing callback function

3 Answers3