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?

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?

• javascript
• jquery
• optimization
• animation

• 1 Have you looked at the sourcecode? – Marius Commented Jan 25, 2010 at 16:42
• I looked at it, saw the queue as below.. but didn't even saw a "setTimeout" or "setIterval"... I'll digg more deeply tomorrow. – Mike Gleason jr Couturier Commented Jan 28, 2010 at 4:28
• I used the decorator pattern to find out.. see my answer. jQuery is pretty optimized. – Mike Gleason jr Couturier Commented Sep 2, 2010 at 14:42

2 Answers 2

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!

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

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

Test 2

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

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

Test 3

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

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

Test 4

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

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

Thanks