CODEWITHSUNDEEP
jquery
Jiew Meng
Jiew Meng

Reputation: 88217

jQuery Multiple Animations with Different Duration, But runs simultaniously

How can I have 2 or more animations thats of different durations, but starts at the same time

when I do something like (for example)

$("#something").animate({opacity: 1}, 2500).animate({left: 1000}, 10000);

#something only starts moving right after opacity animation completes

Upvotes: 2

Views: 1442

Answers (3)

Tokimon
Tokimon

Reputation: 4152

According to the Api Docs you can set a property called queue=false to get the effect you want. So to revise the code:

$("#something")
.animate({opacity: 1}, {duration: 2500, queue: false})
.animate({left: 1000 +"px", queue: false}, {duration: 10000, queue: false});

I hope this does the trick :)

PS. One of the animations shouldn't have the queue=false property, so you could be able to chain other animation the object. In this case, you might wan't to skip the queue=false on the last animation, so chained animations only start AFTER the longest animations has ended. For example if you also want the height to animate after you current animation:

$("#something")
.animate({opacity: 1, queue: false}, {duration: 2500, queue: false})
.animate({left: 1000 +"px"}, {duration: 10000})
.animate({height: 500 +"px"}, {duration: 1000});

In that way the height will only animate after the left animation has ended.

Upvotes: 3

Dave
Dave

Reputation: 4412

The jquery docs explain how to do this: http://docs.jquery.com/Release:jQuery_1.2/Effects#Simultaneous_Animations

I think this will do the trick, although you probably only need the queue: false property for one of the animations.

$("#something")
    .animate({opacity: 1}, {queue: false, duration: 2500})
    .animate({left: 1000}, {queue: false, duration: 10000});

Upvotes: 4

Val
Val

Reputation: 17522

sorry misread your question 

$("#something").animate({opacity: 1,left:1000}, 2500)

Upvotes: 0

Related Questions