Question

我想知道jQuery选择器何时返回多个元素，并且我在所有这些元素上执行“slideDown”...

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

是否有一个代码循环可以同步地移动所有对象，或者jQuery是否单独处理所有对象并且每个对象都有一个执行线程来自行移动？

我的问题是关于动画优化，如果所有对象只有一个计时器而不是每个对象一个，那就太棒了。

任何人都知道jQuery如何处理这种情况？

Answer 1

所有动画都会自动添加到jQuery中的全局效果队列中。但这并不意味着它们按顺序设置动画，制作一个包含十个元素的简单测试页面，您可以同时进行滑动。你会发现它们是同时执行的。

为防止出现这种情况，您可以创建自己的队列，queue documentation

中的示例最能说明这一点。

快乐的黑客攻击！

Answer 2

我终于得到了答案：只有一个计时器可以激活页面中的所有内容。如果队列中有某些内容，则会创建一个可以移动所有内容的计时器，一旦完成所有操作，计时器就会被终止：

使用的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

由于

多个元素的jQuery动画，单个动画线程/计时器还是多个？

2 个答案: