如何使用jquery从下往上动画更改div高度

无论如何,我可以设置从底部到顶部而不是从上到下的div盒高度的变化动画？

这个div框是绝对定位的,对它下面的内容有点像窗帘.

最佳答案

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

因为如果注册了多个/快速鼠标操作,它会容易出错.

尝试在演示中,即使使用.stop()方法也无法实现如下结果：

以下是使用.animate()和高度切换的略微修改：
(只需要：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

另一种方式是：

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

原文地址：https://www.jb51.cc/jquery/428080.html