将 jQuery.queue 与多个元素动画一起使用? [英] Using jQuery.queue with multiple element animations?
问题描述
jQuery 队列非常烦人 - 我无法理解它......
jQuery queue's are very annoying - I can't get my head around it...
以下函数包含 4 个动画，我希望一个接一个地发生(不是同时).
The following function contains 4 animations which I want to happen one after the other (not at the same time).
function startupAnime() {
$("#header").animate({"opacity":"1"},{duration:3000, queue:"global"});
$("#header").animate({"top":"0px"},{duration:3000, queue:"global"});
&("#loader").animate({"opacity":"0"},{duration:3000, queue:"global"});
$("#background").animate({"background-position" : "300px center"},{duration:3000, queue:"global"});
}
$(window).load(function() {
startupAnime();
})
两个#header 元素将一个接一个地进行动画处理，但其余的都是同时发生的.
The two #header elements will animate one after the other, but the rest all happen at the same time.
然后我发现队列仅在您为相同元素设置动画时才有效！这不是很有用...但是添加 queue:"name" 显然应该将它们链接到同一个队列中……尽管这只会阻止它们为我工作.
I then found out the Queue only works if your animating the same element!! That's not very useful... But adding queue:"name" apparently is supposed to link them into the same queue... although this just stops them from working for me.
我在这里遗漏了什么吗?我不确定队列是否意味着'下一个动画将在当前动画完成时开始'，或者'这些动画被保存在队列中等待你释放它们'可能通过调用 queue("global") 或其他东西！?
Am I missing something here? I'm not sure if queue means 'next animation will start when current one is finished', or 'these animations are being held in a queue waiting for you to release them' by maybe calling queue("global") or something!?
大多数建议都是关于为一个元素设置动画，或者设置多个函数并使用回调来迭代"这些函数——如果你问我，这不是很干净.我只是希望能够在需要时运行动画列表.
Most suggestions talk about animating one element, or setting up many functions and using callback to 'iterate' through the functions - not very clean if you ask me. I simply want to be able to run a list of animations whenever I ask for it.
注意:动画列表"可能一次为一个元素设置动画，但我也可能希望两个或更多元素在列表中的某个点同时设置动画.这是一个示例:
NB: A 'list' of animations might animate elements one at a time, but I also might want two or more elements to animate at the same time at some point in the list. Here's a sample:
animate element A
-> then ->
animate element B
-> then ->
animate element C and D together
-> then ->
animate element E
推荐答案
你有很多选择，但这是我要做的(因为我喜欢不言自明的语法):
You have a lot of options, but here is what I would do (because I like the self-explanatory syntax):
$.when(
$("#header").animate({opacity: 1}, 3000).promise(),
$("#header").animate({top: 0}, 3000).promise()
).done(function() {
$("#loader").animate({opacity: 0}, 3000).promise()
.done(function() {
$("#background").animate({"background-position" : "300px center"}, 3000)
})
})
这篇关于将 jQuery.queue 与多个元素动画一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
