Animation sequence?

Question

JavaScript

There is such a line

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

on hover, only opacity fires, how can I make the width change work first, and then opacity?

Answer 1

In addition. Tricky and complex animations can be done very well with @keyframes. Here's an example: jsfiddle.net/IonDen/nmpkkaqs first changes the width, then the transparency. Can be very flexibly configured. Look for example this article: https://css-tricks.com/snippets/css/keyframe-anima... or this generator: cssanimate.com

Answer 2

You need an animation queue as far as I understand.
Read here for example:
professorweb.ru/my/javascript/jquery/level2/2_5.php
There is even a specific code example.

Answer 3

You can do it like this jsfiddle.net/9h32swz4/1 or like this

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

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

Answer 4

You can push the second animation into the callback of the first animation, for example.
In general, for example, I have not used jQuery for animations for a long time. Exclusively CSS.