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));

不是很好的测试，但无论如何。

享受！！