JQuery animation on several elements, one animation stream / timer or several?

Question

I am wondering when the jQuery selector returns multiple elements, and I do "slideDown", for example, in all of these elements ...

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

Is there one single loop of code that moves all objects into synchronization, or if jQuery processes all the objects separately, and each of them has a execution thread to move?

My question is about optimizing the animation, and it would be great if for all objects, instead of one, there was only one timer on the objects.

Does anyone know how jQuery handles this situation?

Answer 1

I finally have the answer: there is only one timer that enlivens everything on the page. If there is something in the queues, a timer is created that moves everything, and as soon as everything is done, the timer will be killed:

HTML used:

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

Used JavaScript:

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

Test:

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 

thanks

Answer 2

All animations are automatically added to the global effects queue in jQuery. But this does not mean that they are animated sequentially, make a simple test page with ten elements that you will do for the slide at the same time. You will see that they are executed simultaneously.

To prevent this behavior, you can create your own queues; it is best to describe this example in the queue documentation

Happy hack!