How do I animate changing of div height from the bottom up using jquery

Question

Is there anyway i can animate the changing of a div box height from bottom to top, instead of top to bottom?

This div box is absolute positioned and acts kind of like a curtain to the contents underneath it.

Answer 1

WHY NOT TO USE slideUp() / slideDown() :

'cause it's prone to bugs if multiple / fast mouse actions are registered.
Try in the demo, even using .stop() method you cannot achieve the result like below:

---

Here is a slight modification using .animate() and height toggling: (just need: position:absolute; bottom:0px; display:none;)

demo 1 (a nice way to do it)

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({height: 'toggle'});
});

---

demo 2

Another way is:

var boxHeight = $('.box').innerHeight();  // get element height

$('.curtain').css({top:boxHeight}); // push 'curtain' down

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({top: 0});  // animate to desired top distance
},function(){
  $(this).find('.curtain').stop().animate({top: boxHeight}); // and on mouseout - back down
});