@Sashqa

Последовательность анимации?

Есть такая строчка
block.stop().animate({width: widthItem, opacity: 1}, 500);


при наведении срабатывает только opacity, каким образом сделать так, чтобы в начале срабатывало изменение ширины, а потом opacity?
  • Вопрос задан
  • 788 просмотров
Решения вопроса 1
IonDen
@IonDen Куратор тега jQuery
JavaScript developer. IonDen.com
В дополнение. Хитрые и сложные анимации можно очень хорошо делать на @keyframes. Вот пример: jsfiddle.net/IonDen/nmpkkaqs вначале меняется ширина, потом прозрачность. Можно очень гибко настраивать. Посмотрите например эту статью: https://css-tricks.com/snippets/css/keyframe-anima... или вот такой генератор: cssanimate.com
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
wladyspb
@wladyspb
Программист
Вам нужна очередь анимации, насколько я понимаю.
Почитайте тут например:
professorweb.ru/my/javascript/jquery/level2/2_5.php

Там даже есть конкретный пример кода.
Ответ написан
inik23
@inik23
типа разработчик
Можно так jsfiddle.net/9h32swz4/1 или так
var block = $('#iddd'),
    widthItem = 300;

block.animate({width: widthItem}, 1500).delay(800).animate({'opacity':'1'},1500)
Ответ написан
teotlu
@teotlu
Навёрстываю упущенное
Можете запихнуть вторую анимацию в callback первой анимации, например.
А вообще я, например, уже давно не использую jQuery для анимаций. Исключительно CSS.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 апр. 2020, в 19:50
20000 руб./за проект
03 апр. 2020, в 19:01
500 руб./за проект
03 апр. 2020, в 18:13
5000 руб./за проект