Задать вопрос
@Sashqa
javascript

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

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


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скопировать сайт
19 апр. 2024, в 17:06
15000 руб./за проект
Поправить пхп скрипт
19 апр. 2024, в 16:53
1000 руб./за проект
Требуется настройка Яндекс Директа
19 апр. 2024, в 16:45
5000 руб./за проект
Ещё заказы