jQuery animasyonu birden çok öğede, tek animasyonlu iş parçacığı/zamanlayıcı veya çoklu?

Question

jQuery seçici birden fazla öğesi döndürür ve ben tüm bu unsurları örneğin bir "slideDown" ne zaman merak ediyorum

...

$('.allthisclasss').slideDown();

tüm nesneleri aşağı hareket tek bir kod döngü var mı senkronize veya jQuery tüm nesneleri ayrı ayrı ele alır ve her birinin kendilerini taşımak için bir yürütme ipi var mı?

Sorum şu: Animasyon optimizasyonu hakkında ve nesne başına bir nesne yerine yalnızca bir tane zamanlayıcı olması harika olurdu.

JQuery'nin bu durumu nasıl ele aldığını herkes bilir mi?

Answer 1

Sonunda cevabı aldım: Sayfadaki her şeyi canlandıran yalnızca bir zamanlayıcı var. kuyruklarda şey varsa, bir zamanlayıcı her şeyi taşır oluşturulur ve en kısa herşey yapıldığı gibi, zamanlayıcı öldürüldü:

HTML Kullanılan:

<div id="test1" class="tests" style="background-color:#FFF; border:1px solid #000; width:40px; height:40px; position:absolute; left:0px; top:0px;"></div> 
<div id="test2" class="tests" style="background-color:#FFF; border:1px solid #000; width:40px; height:40px; position:absolute; left:0px; top:50px;"></div> 

JavaScript Kullanılan:

var setIntervalDecorated = setInterval; 
setInterval = function(func, delai) { 
    var id = setIntervalDecorated(func, delai); 
    console.log('setInterval: ' + id + ' (' + delai + 'ms)'); 
    return id; 
}; 

var clearIntervalDecorated = clearInterval; 
clearInterval = function(id) { 
    console.log('clearInterval: ' + id); 
    clearIntervalDecorated(id); 
}; 

Testler durum:

Deney 1

$('#test1').animate({ left: '+=500' }, 5000, function() { console.log('test1: Animation complete'); }); 

setInterval: 5 (13ms) 
test1: Animation complete 
clearInterval: 5 

Deney 2

$('.tests').animate({ left: '+=500' }, 5000, function() { console.log('tests: Animation complete'); }); 

setInterval: 5 (13ms) 
tests: Animation complete 
tests: Animation complete 
tests: Animation complete 
clearInterval: 5 

test 3

$('#test1').animate({ left: '+=500' }, 5000, function() { console.log('test1: Animation complete'); }); 
$('#test2').animate({ left: '+=500' }, 5000, function() { console.log('test2: Animation complete'); }); 

setInterval: 5 (13ms) 
test1: Animation complete 
test2: Animation complete 
clearInterval: 5 

Deney 4

$('#test1').animate({ left: '+=500' }, 5000, function() { console.log('test1: Animation complete'); }); 
setTimeout(function() { $('#test2').animate({ left: '+=500' }, 5000, function() { console.log('test2: Animation complete'); }); }, 1000); 

setInterval: 5 (13ms) 
test1: Animation complete 
test2: Animation complete 
clearInterval: 5 

Teşekkür

Answer 2

Tüm animasyonlar jQuery'deki global efekt sırasına otomatik olarak eklenir. Ancak bu, sırayla animasyonlu oldukları anlamına gelmez, aynı anda kaydırabileceğiniz on öğe içeren basit bir test sayfası hazırlar. Aynı anda yürütüldüğünü göreceksiniz.

en iyi hack queue documentation

Happy olduğunu örneklerle anlatılmıştır ile, kendi sıraları yapabilir, bu durumun ortaya çıkmaması için!