[jQuery] animation question
I'm trying to create an effect using a <ul> within a <div>. I want to
have each <li> slide up individually from (outside) the bottom of the
<div> to the highest available position in the <div> without
overlapping other <li> elements. Its kind of a "scroll/accordian"
effect. At the conclusion of the animation, the <div> would look
something like this:
<div>
<ul>
---------------------------------------
| |
| <li> |
| |
---------------------------------------
| |
| <li> |
| |
---------------------------------------
| |
| <li> |
| |
---------------------------------------
| |
| <li> |
| |
---------------------------------------
</ul>
</div>
Being new to jQuery, I'm a little unclear about how to approach this.
Is it possible to use the jQuery animate method to "slide" each
individual <li> up into position in the <div>? Would this best be
done by using the 'top' value in .animate incremented by the height of
each <li> slid in beforehand? Also how does one handle the visibility
of the <li> items before animating them? I'd like for the <li> to be
completely invisible and then "appear" from the bottom of the <div> as
they slide upwards.
Is this a reasonable undertaking using jQuery, or is there another
better way (or plug in) to do this?
Thanks!