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屋！