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

Question

[Sashqa]

Есть такая строчка

block.stop().animate({width: widthItem, opacity: 1}, 500);

при наведении срабатывает только opacity, каким образом сделать так, чтобы в начале срабатывало изменение ширины, а потом opacity?

Comments

[Nikolay Talanov]

Пожалуйста, не делаете анимацию на jQuery.animate в 2015 году. С такими простыми вещами справится css transition. И производительность будет куда лучше, и жс не надо будет писать, да еще и декларативненько все будет.

[teotlu]

Nikolay Talanov: полностью поддерживаю!

[Sashqa]

teotlu: Nikolay Talanov: Пожалуй так и сделаю. Спасибо

Answer 1

[Денис Инешин]

В дополнение. Хитрые и сложные анимации можно очень хорошо делать на @keyframes. Вот пример: jsfiddle.net/IonDen/nmpkkaqs вначале меняется ширина, потом прозрачность. Можно очень гибко настраивать. Посмотрите например эту статью: https://css-tricks.com/snippets/css/keyframe-anima... или вот такой генератор: cssanimate.com

Answer 2

[Владимир Голубев]

Вам нужна очередь анимации, насколько я понимаю.
Почитайте тут например:
professorweb.ru/my/javascript/jquery/level2/2_5.php

Там даже есть конкретный пример кода.

Answer 3

[Иван Кондратьев]

Можно так jsfiddle.net/9h32swz4/1 или так

var block = $('#iddd'),
    widthItem = 300;

block.animate({width: widthItem}, 1500).delay(800).animate({'opacity':'1'},1500)

Answer 4

[teotlu]

Можете запихнуть вторую анимацию в callback первой анимации, например.
А вообще я, например, уже давно не использую jQuery для анимаций. Исключительно CSS.