JQuery анимация на нескольких элементах, один поток анимации / таймер или несколько?

Question

Мне интересно, когда селектор jQuery возвращает несколько элементов, и я делаю «slideDown», например, для всех этих элементов ...

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

Существует ли один цикл кода, который перемещает все объекты синхронно или если jQuery обрабатывает все объекты по отдельности, и у каждого из них есть поток выполнения, чтобы переместиться?

Мой вопрос касается оптимизации анимации, и было бы замечательно, если бы был только один таймер для всех объектов вместо одного на объекты.

Кто-нибудь знает, как jQuery справляется с этой ситуацией?

Answer 1

Все анимации автоматически добавляются в глобальную очередь эффектов в jQuery. Но это не значит, что они анимированы последовательно, создайте простую тестовую страницу с десятью элементами, которые вы все делаете для одновременного скольжения. Вы увидите, что они выполняются одновременно.

Чтобы избежать такого поведения, вы можете создавать свои собственные очереди, лучше всего описанные в этом примере в документации

Счастливого взлома!

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

Спасибо