jQuery animate element reveal - bottom to top

Question

I'm trying to animate a horizontal lists appearance. It's a top navigation bar.

The following works pretty well, but it animates in from the top (of, I assume, the ul) to the bottom.

How would animate bottom, up?

$("#topnavigation li").css({height:'0'}); // 'hide' it first
$("#topnavigation li", this).stop().animate({height:'23px'},{queue:false,duration:1000});

Answer 1

You have to adjust it's position as well..

$("#topnavigation li").css({height:'0', top:'23'}); // 'hide' it first
$("#topnavigation li", this).stop().animate({height:'23px', top: '0px'},{queue:false,duration:1000})

;

of course, top's starting value could be different, it depends on your styling for the element. You might use top, or margin-top; depends on the css.

You can also use the slide effect in jqueryui and specify direction up and down for hide and show.