jQuery animazione su più elementi, singola animazione thread/timer o più?

Question

Mi chiedo quando il selettore jQuery restituisce più elementi e fare un "slideDown" per esempio a tutti coloro elemento ...

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

Esiste un singolo ciclo di codice che si muove verso il basso tutti gli oggetti in sincrono o se jQuery considera tutti gli oggetti separatamente e ognuno di essi ha un filo di esecuzione per muoversi da solo?

La mia domanda riguarda l'ottimizzazione dell'animazione e sarebbe bello se ci fosse solo un timer per tutti gli oggetti anziché uno per gli oggetti.

Qualcuno sa come jQuery gestisce questa situazione?

Answer 1

Ho finalmente la risposta: c'è solo un timer che anima tutto nella pagina. Se c'è qualcosa nelle code, un timer viene creata che muove tutto e non appena tutto è fatto, il timer viene ucciso:

HTML utilizzato:

<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 Usato:

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

Prove caso:

test 1

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

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

test 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 

test 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 

Grazie

Answer 2

Tutte le animazioni vengono automaticamente aggiunte alla coda effetti globali in jQuery. Ma ciò non significa che siano animati in sequenza, crea una semplice pagina di prova con dieci elementi che tutti fai scorrere allo stesso tempo. Vedrai che sono eseguiti simultaneamente.

Per evitare che il comportamento, potete fare le vostre proprie code, con è meglio descritta da quell'esempio nel queue documentation

Felice l'hacking!