jquery - 如何使用 jquery 从下到上动画改变 div 高度

Question

无论如何，我可以动画化 div 框高度从下到上的变化，而不是从上到下吗？

这个 div 框是绝对定位的，其作用有点像其下面的内容的窗帘。

Answer 1

为什么不使用slideUp()/slideDown():

因为如果注册多个/快速鼠标操作，很容易出现错误。
在演示中尝试一下，即使使用 .stop() 方法也无法达到如下结果:

<小时/>

这是使用 .animate() 和高度切换进行的轻微修改:(只需要:position:absolute；底部:0px；显示:无；)

demo 1 (a nice way to do it)

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

<小时/>

demo 2

另一种方法是:

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
});