CODEWITHSUNDEEP
jqueryjquery-animate
Dimitri Vorontzov
Dimitri Vorontzov

Reputation: 8104

How to make two jQuery animations play simultaneously?

I have these two things happen in my jQuery-animated website:

$('#myFirstDiv').animate({top: "15%"}, 3000); 
$('#mySecondDiv').animate({bottom: "15%"}, 3000);

These two animations seem to happen one after another, rather than simultaneously. There's a slight delay before the second one plays, about one tenth of a second. I want to make them occur simultaneously.

I tried this:

$('#myFirstDiv').animate({top: "15%"}, 3000); 
$('#mySecondDiv').animate({bottom: "15%"}, {duration:3000, queue: false});

but it's probably wrong.

I would appreciate advice on how to do this correctly.

Upvotes: 1

Views: 1086

Answers (1)

sjobe
sjobe

Reputation: 2837

Your code should work just fine. Animation in jQuery is asynchronous, this means that if you have two animation calls, the second one will get called right after the first one even though the first animation is still in progress. If at any point you want to have the first one to execute to the end before the second one, your code will look like 

$('#myFirstDiv').animate({top: "15%"}, 3000, function(){
  $('#mySecondDiv').animate({bottom: "15%"}, 3000);
});

Upvotes: 2

Related Questions