Forums

I'm looking to create an effect whereby a list of information can be deleted on a mouse click.

Before I dive into coding I wanted to see if there was a recommended way of chaining animations on different elements. For example i'm using an unordered list <ul>, and on a mouseclick I want each <li> element to blind up and fade. The individual effects on each element I know how to handle, however I haven't come across any documentation for firing the animation on the next <li> element after its previous sibling has finished animating.

Initially I thought of subscribing to the onComplete event selectively using a forloop, but this seems very clunky. ie, iterate through each <li> element in the unordered list craeting the animation, executing the animation and (providing the <li> isn't the last one in the list), subscribing to the onComplete event and asigning a new animation to the next element in the list. (sorry if that sounds a bit confusing!)

Has anyone had to do something similar before?

And these examples from Dav's website:

http://blog.davglass.com/files/yui/animagain/

and

http://blog.davglass.com/files/yui/animseq/

Stuart,

Here's an example that does something similar to what you're asking:

http://ericmiraglia.com/yui/demos/lianim.php

-Eric