CODEWITHSUNDEEP
javascriptjqueryanimation
MirrorMirror
MirrorMirror

Reputation: 188

jquery on end of concurrent animations

So I'm running two concurrent animations on an element and i want to do something AFTER both animations have ended

        $("#MyDiv").stop().animate({left: "-=" + 500 + "px"}, 1000);
        $("#MyDiv").animate({top: "-=" + 500 + "px"}, 1000, 

function() {
//do something here
});

so this is my approach. I was wondering if there is a better approach, because the first animation may end a few milliseconds earlier or later.

second question: is there any difference between .stop().animate() and .animate() ? If yes, what is it ?

thanks in advance!

Upvotes: 1

Views: 194

Answers (1)

Johan
Johan

Reputation: 35194

"because the first animation may end a few milliseconds earlier or later"

No, you have set both animations to 1000ms.

"is there any difference between .stop().animate() and .animate() ? If yes, what is it ?"

Yes, if the animation is active and stop() is called, the first animation will be stopped.

Since you are animating the same element, you dont need to select it twice. I suggest you do something like this:

$("#MyDiv").stop(true).animate({left: "-=" + 500 + "px", top: "-=" + 500 + "px"}, 1000, 
function(){
    //animation complete
});

If the animation gets "stuck" you can add a second bool to the stop method, stop(true, true) ("jumpToEnd"). The first one will clear the animation queue. Hard to say what you need without seing more code.

Upvotes: 4

Related Questions