jQuery 中的非嵌套动画序列? [英] A non-nested animation sequence in jQuery?

问题描述

我正在尝试使用 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 中的非嵌套动画序列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！