animación de jQuery en elementos múltiples, hilo/temporizador de animación individual o múltiple?

Question

Me pregunto cuando el selector de jQuery devuelve varios elementos y hago un "slideDown", por ejemplo en todos los elemento ...

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

¿Hay un solo bucle de código que mueve todos los objetos hacia abajo en sincronización o si jQuery trata a todos los objetos por separado y cada uno tiene un hilo de ejecución para moverse por sí mismos?

Mi pregunta es acerca de la optimización de la animación y sería genial si hubiera un solo temporizador para todos los objetos en lugar de uno por objeto.

¿Alguien sabe cómo jQuery maneja esta situación?

Answer 1

Finalmente tengo la respuesta: solo hay un temporizador que anima todo en la página. Si hay algo en las colas, un temporizador se crea que lo mueve todo y tan pronto como todo está hecho, el temporizador se mató:

HTML utilizado:

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

caso

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

pruebas:

Prueba 1

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

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

Prueba 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 

Prueba 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 

Prueba 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 

Gracias

Answer 2

Todas las animaciones se agregan automáticamente a la cola de efectos globales en jQuery. Pero eso no significa que estén animados secuencialmente, haga una página de prueba simple con diez elementos que todos hagan para deslizarse al mismo tiempo. Verás que se ejecutan simultáneamente.

Para evitar que el comportamiento, usted puede hacer sus propias colas, con se describe mejor por ese ejemplo en el queue documentation

feliz piratería!