javascript - jQuery 中的非嵌套动画序列？

Question

我正在尝试使用 jQuery 创建一个动画序列，其中一个动画在前一个动画完成后开始。但我就是无法理解它。我曾尝试使用 jQuery.queue，但我认为我无法使用它，因为它似乎为 jQuery 数组中的每个元素提供了一个单独的队列。

我需要这样的东西:

$('li.some').each(function(){
    // Add to queue
    $(this).animate({ width: '+=100' }, 'fast', function(){
        // Remove from queue
        // Start next animation
    });
});

有没有一种 jQuery 方法可以做到这一点，还是我必须手动编写和处理自己的队列？

Answer 1

您可以自定义 .queue()避免无限嵌套..

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()每个元素的动画在之前所有元素的持续时间内..

$('li.some').each(function(idx){
    var duration = 500; 
    $(this).delay(duration*idx).animate({ width: '+=100' }, duration);
});

演示在 http://jsfiddle.net/gaby/qDbRm/3/