多个元素的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

谢谢