jQuery'de yuvalanmamış bir animasyon dizisi mi?

Question

jQuery ile bir animasyon dizisi oluşturmaya çalışıyorum; burada bir animasyon, bir öncekinden sonra başlar. Ama kafamı etrafına dolamıyorum. JQuery.queue kullanmayı denedim, ama bunu kullanabileceğimi sanmıyorum çünkü jQuery dizisindeki her öğe için tek bir sıraya sahip gibi görünüyor. Bunu yapmanın bir jQuery yolu var mı

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

ya da ben yazmak ve elle kendi kuyruğunu işlemek zorundayım:

gibi bir şey gerekir?

Answer 1

..

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

Demo üzerinde http://jsfiddle.net/gaby/qDbRm/2/

---

ise de Diğer taraftan, aynı animasyonu çok sayıda öğe için gerçekleştirmek istersiniz. Herkesin yanıtlarken için o zaman bütün öncekilerin süresince .delay() her öğenin animasyon onların dizin kullanabilirsiniz birbiri ardına e ..

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

Demo http://jsfiddle.net/gaby/qDbRm/3/

Answer 2

.animate eylemci() aslında başka .animate(), bu yüzden yapmanız gerekir hepsi böyle devam

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

ve olacağını kabul eder.

Answer 3

Sıradaki birini tekrar arayabilirsin.

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

neden bir sıra oluşturmuyorsunuz?

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

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

DÜZENLEME: eklenen hız param

Sen sınırsız iç içe önlemek için özel bir .queue() yapabilirsiniz

Answer 5

de teşekkürler!

Sorunun sonucunu paylaşmalıyım diye düşündüm. İşte bir kerede bir kerede bir kerede aşağı kaydıran basit bir jQuery slideDownAll eklentisi.

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

Çok iyi değil, ama yine de.