CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Emphram Stavanger
Emphram Stavanger

Reputation: 4214

Cascading animation

I want to give the same animation to a set of elements, but each incrementally delayed so that the animations make a sort of a 'wave'.

I made a fiddle about it; http://jsfiddle.net/ttLJ3/

Basically each element be delayed by increments of 50ms, do a thing, wait 300ms and undo it.

It just simply doesn't seem to work. It does nothing. If I remove the .delay(300).show(), all elements disappear immediately.

How can I make this work? Thanks in advance! :)

Upvotes: 0

Views: 753

Answers (2)

nnnnnn
nnnnnn

Reputation: 150020

According to the .hide() doco, "When a duration is provided, .hide() becomes an animation method." Apparently this means that if you don't provide a duration the hiding isn't done in the animation queue and so doesn't work with .delay().

So try adding a short duration to .hide() and .show():

$(this).delay(50 * index).hide(1).delay(300).show(1);

Updated demo: http://jsfiddle.net/ttLJ3/2/

Upvotes: 1

uadnal
uadnal

Reputation: 11425

I was able to fix your problem here.

http://jsfiddle.net/ttLJ3/1/

Since delay works with the fx queue, you have to pass in an integer of sorts for delay to work otherwise the hide and show methods will execute immediately. Making it seem as if nothing is happening at all. I passed in 0 to each of the hide and show calls to fix the issue.

$(this).delay(50 * index).hide(0).delay(300).show(0);

Upvotes: 1

Related Questions