jQuery中的非嵌套动画序列？答案

【问题标题】：A non-nested animation sequence in jQuery?jQuery中的非嵌套动画序列？
【发布时间】：2011-10-13 08:26:54
【问题描述】：

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

我需要类似的东西：

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

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

【问题讨论】：

标签： javascript jquery animation queue sequence

【解决方案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/ 上的演示

【讨论】：

【解决方案2】：

.animate() 的回调实际上接受另一个 .animate()，所以你要做的就是

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

等等。

【讨论】：

+1 这是链接动画的标准方式。很简单。
但是你不能在循环中这样做。注意“每个”！

【解决方案3】：

你可以递归调用下一个。

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

animate(0);

【讨论】：

【解决方案4】：

为什么不建立一个队列？

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

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

编辑：添加速度参数

【讨论】：

这可靠吗？你确定第一个动画会在那个时候完成吗？

【解决方案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));

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

享受吧！！

【讨论】：