Sashqa2015-06-03 14:53:32
Sashqa, 2015-06-03 14:53:32

Animation sequence?

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 the question

In order to leave comments, you need to log in

4 answer(s)
Denis Ineshin, 2015-06-03

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

Vladimir Golubev, 2015-06-03

You need an animation queue as far as I understand.
Read here for example:
There is even a specific code example.

Ivan Kondratiev, 2015-06-03

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)

teotlu, 2015-06-03

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question