jQuery animation on multiple elements, single animation thread/timer or multiple?

Question

Hi,

I'm wondering when the jQuery selector returns multiple elements and I do a "slideDown" for example on all those element...

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

Is there a single loop of code that moves all objects down in synch or if jQuery treats all objects separately and they each have a thread of execution to move themselves?

My question is about animation optimization and it would be great if there were only one timer for all objects instead of one per objects.

Anyone knows how jQuery handles this situation?

Answer 1

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

To prevent that behaviour, you can make your own queues, with is best described by that example in the queue documentation

Happy hacking!

Answer 2

I finally have the answer: There is only one timer that animates everything in 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 is 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>

JavaScript Used:

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

Tests case:

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