问题描述
我正在尝试使用 jQuery 创建一个动画序列,其中一个动画在前一个动画完成后开始.但我就是无法绕过它.我尝试使用 jQuery.queue,但我认为我不能使用它,因为它似乎为 jQuery 数组中的每个元素都有一个单独的队列.
I'm trying to create an animation sequence with jQuery where one animation starts after the previous one is done. But I just can't wrap my head around it. I've tried to make use of the jQuery.queue, but I don't think I can use that because it seems to have one individual queue for each element in the jQuery array.
我需要类似的东西:
$('li.some').each(function(){
// Add to queue
$(this).animate({ width: '+=100' }, 'fast', function(){
// Remove from queue
// Start next animation
});
});
是否有 jQuery 方法可以做到这一点,还是我必须手动编写和处理我自己的队列?
Is there a jQuery way to do this or do I have to write and handle my own queue manually?
推荐答案
您可以自定义.queue()
避免无限嵌套..
You can make a custom .queue()
to avoid the limitless nesting..
var q = $({});
function animToQueue(theQueue, selector, animationprops) {
theQueue.queue(function(next) {
$(selector).animate(animationprops, next);
});
}
// usage
animToQueue(q, '#first', {width: '+=100'});
animToQueue(q, '#second', {height: '+=100'});
animToQueue(q, '#second', {width: '-=50'});
animToQueue(q, '#first', {height: '-=50'});
演示在 http://jsfiddle.net/gaby/qDbRm/2/
另一方面,如果您想为多个元素一个接一个地执行相同的动画,那么您可以使用它们的索引.delay()
每个元素在之前所有元素的持续时间内的动画..
If, on the other hand, you want to perform the same animation for a multitude of elements one after the other then you can use their index to .delay()
each element's animation for the duration of all the previous ones..
$('li.some').each(function(idx){
var duration = 500;
$(this).delay(duration*idx).animate({ width: '+=100' }, duration);
});
演示在 http://jsfiddle.net/gaby/qDbRm/3/
这篇关于jQuery 中的非嵌套动画序列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!