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!
