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/

Answer 2

.animate（）的回調實際上接受另一個.animate（），所以你所要做的就是

    $(this).animate({ width: '+=100' }, 'fast', function(){
         $(selector).animate({attr: val}, 'speed', function(){
});
    });

等等。

Answer 3

你可以遞歸地調用下一個。

function animate(item) {
    var elem = $('li.some').eq(item);
    if(elem.length) {
        elem.animate({ width: '+=100' }, 'fast', function() {
            animate(item + 1);
        });
    }
}

animate(0);

Answer 4

為什么不建立一個隊列？

var interval = 0; //time for each animation
var speed = 200;

$('li.some').each(function(){
    interval++;
    $(this).delay(interval * speed).animate({ width: '+=100' }, speed);
});

編輯：增加速度參數

Answer 5

感謝大家的回復！

我想我應該分享我的問題的結果。 這是一個簡單的jQuery slideDownAll插件，它一次向下滑動一個項目而不是一次全部滑動。

(function ($) {

    'use strict';

    $.fn.slideDownAll = function (duration, callback) {

        var that = this, size = this.length, animationQueue = $({});

        var addToAnimationQueue = function (element, duration, easing, callback) {
            animationQueue.queue(function (next) {
                $(element).slideDown(duration, easing, function () {
                    if (typeof callback === 'function') {
                        callback.call(this);
                    }
                    next();
                });
            });
        };

        return this.each(function (index) {
            var complete = null,
                easing = 'linear';
            if (index + 1 === size) {
                complete = callback;
                easing = 'swing';
            }
            addToAnimationQueue(this, duration / size, easing, complete);
        });
    };

} (jQuery));

測試不是很好，但無論如何。

請享用！！