Как наложить animate jquery друг на друга?

Question

[Александр Ружевич]

Доброго времени суток понадобилось создать эффект вылетающего и взрывающегося салюта, с помощью animate jquery сделал что бы картинка поднималась вверх а затем резко увеличивалась для достижения эффекта взрыва.

$(".fire").animate({bottom: "50%", right: "200px"}, 5000);
$(".fire").animate({width: "300px", height: "300px"}, 300);

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

Answer 1

[Дима Паутов]

Ну вообще, такие вещи легко делаются через css анимации. Если в вашем примере, то можно так: https://jsfiddle.net/00exx6h5/

Пробовал с таймерами, но видимо animate то ли блокирует, то ли еще как-то воздействует на таймеры, что в любом случаи они будут идти друг за другом.

Comments

[Александр Ружевич]

спасибо за ответ, хотелось все сделать одним скриптом т.к. там несколько анимаций идущих друг за другом, но видимо все таки придется на css, за пример спасибо отдельно)