Как вынудить анимации jQuery работать одновременно?
У меня есть веб-страница с анимациями (Анимация JQuery) повсеместно. Типичная последовательность анимации может содержать три или четыре объекта, анимирующие независимо одновременно. Проблема, с которой я сталкиваюсь, - то, что организация очередей анимаций не предсказуема. Некоторые анимации работают одновременно, в то время как некоторые другие не.
Я делаю что-то как
setTimeout(function(){
//animations
}, delay);
во многих местах только, чтобы попытаться сгруппировать анимации. Даже когда с помощью этого, некоторые анимации в блоке кода не работают одновременно.
Там какой-либо путь состоит в том, чтобы вынудить анимации быть выполненными одновременно? Существует ли способ заполнить очередь анимациями и затем выполнить их одновременно? Есть ли какая-либо подробная документация по тому, как эта вещь на самом деле работает?
Править: Пример кода, Предупреждающий: код грязен
Вопрос смотрит на код, как Вы знаете, какая из анимаций собирается работать одновременно?
2 ответа
Это запускается одновременно (но не, если уже есть текущая анимация на объекте):
$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800);
И если вы хотите быть на 100% уверены, что он сразу же анимирован (обратите внимание на очередь: false ):
$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800});
Вы также можете это сделать. (Он по-прежнему будет работать одновременно)
$('.blabla .1')
.animate({fontSize: 20},{queue:false,duration:800})
.animate({opacity: 0.4},{queue:false,duration:800});
Выполняются одно за другим.
$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800);
То же
$('.blabla .2').animate({opacity: 0.3}, 800, function() {
$('.blabla .3').animate({opacity: 0.3}, 800);
});
Я надеюсь, что это ответ на ваш вопрос.
Извините за все правки, я здесь новенький.
Используйте параметр шаг . Вы даете ему функцию, и после каждого шага текущей анимации он выполняет эту функцию. Таким образом, вы можете оживить там. Ссылка на документы .