开发者

jQuery Multiple Animations with Different Duration, But runs simultaniously

开发者 https://www.devze.com 2023-02-13 09:11 出处:网络
How can I have 2 or more animations thats of different durations, but开发者_Go百科 starts at the same time

How can I have 2 or more animations thats of different durations, but开发者_Go百科 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


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});


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, queue: false}, 2500)
.animate({left: 1000 +"px", queue: false}, 10000);

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}, 2500)
.animate({left: 1000 +"px"}, 10000)
.animate({height: 500 +"px"}, 1000);

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


sorry misread your question

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

精彩评论

暂无评论...
验证码 换一张
取 消