jQuery對多個元素的動畫，單個動畫線程/定時器還是多個？

Question

當jQuery選擇返回多個元素和我所有這些元素上做一個「了slideDown」比如我不知道......

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

有沒有一個單一的代碼迴路上下移動的所有對象同步還是如果jQuery分別處理所有對象，並且它們都有一個執行線程來移動它們自己？

我的問題是關於動畫優化，如果對於所有對象只有一個定時器而不是每個對象一個，那將會很好。

任何人都知道jQuery如何處理這種情況？

Answer 1

我終於有了答案：只有一個計時器可以動畫頁面中的所有內容。如果有什麼東西在隊列中，計時器創建一切舉動，一旦一切都完成後，計時器被殺害：

使用HTML：

<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中使用：

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

測試情況：

試驗1

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

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

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

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

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

謝謝

Answer 2

所有動畫會自動添加到jQuery中的全局效果隊列中。但是，這並不意味着它們會按順序進行動畫製作，只需製作一個簡單的測試頁，其中包含您可以同時滑動的十個元素。你會看到它們被同時執行。

爲了防止這種行爲，你可以讓自己的隊列，通過例如在queue documentation

快樂黑客是最好的形容！