Question

无论如何，我可以设置从底部到顶部而不是从上到下更改div框高度的动画吗？

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

Answer 1

为什么不使用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
});

Answer 2

$('div').slideUp();

这使用.slideUp()将div从下到上设为0px高度

Answer 3

您可以通过同时设置顶部和高度的动画来实现此效果。您只需要确定最终高度。

例如，假设你有：

#mydiv{
    top: 200px;
    height: 300px;
    width: 100px;
    background-color: red;
    position: absolute;
};

并且您希望最终将div设置为动画：

#mydiv{
    top: 0px; /* new top */
    height: 500px; /* new height */
    width: 100px;
    background-color: red;
    position: absolute;
};

jquery代码，单击div：

$("#mydiv").on("click", function(){
   $('#mydiv').animate( {"top": "0px", "height": "500px" } );
});

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

3 个答案:

demo 1 (a nice way to do it)

demo 2