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?

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?

• javascript
• jquery
• jquery-animate
• jquery-effects
• jquery-easing

• Unless you've set $myDiv to equal $("#myDiv"), it should be the latter. – AstroCB Commented Jul 14, 2014 at 0: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 plete function. – Nullqwerty Commented Jul 14, 2014 at 0:36

3 Answers 3

Try this

Demo: jsFiddle

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

There are a couple of things that need fixing here:

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

It's either

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

or

$(element).animate(properties, options)

where options is an object formatted like this:

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

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

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

Demo

Alternatively, you could use the first format option:

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

Demo

One way is use of JQuery Promise

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

     alert('hi done');

});