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

【问题标题】：How do I animate changing of div height from the bottom up using jquery如何使用jquery从下到上动画改变div高度
【发布时间】：2012-05-28 01:44:19
【问题描述】：

有没有我可以动画改变 div 框高度从下到上，而不是从上到下？

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

【问题讨论】：

标签： jquery jquery-animate

【解决方案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
});

【讨论】：

干杯老兄。我更喜欢 Demo 2，因为我需要控制高度。
@MakkyNZ 也为你加油！考虑了一下，所以我举了一个例子！ ;)

【解决方案2】：

$('div').slideUp();

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

【讨论】：

【解决方案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" } );
});

【讨论】：