@Sashqa

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

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


при наведении срабатывает только opacity, каким образом сделать так, чтобы в начале срабатывало изменение ширины, а потом opacity?
  • Вопрос задан
  • 704 просмотра
Решения вопроса 1
IonDen
@IonDen
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.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы