jQuery中的非嵌套动画序列？

我正在尝试使用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)); 

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

请享用！！