jquery - 在jQuery中从下到上动画div而不是从上到下

Question

在触发点击功能时，我有一个div动画：height

$('#menu').click(function() {
  $('#test').animate({
      height: 'toggle'
    }, 290, function() {    
  });
});

到目前为止效果很好。但我想div从下到上制作动画，不像在这个小提琴中看到的那样。

有什么解决办法吗？

Answer 1

您可以将它放在容器中并绝对定位吗？：

HTML：

<a href="#" id="menu">click me for menu</a>
    <div id="cont">
    <div id="test"></div>
</div>

CSS：

#cont{
    height:500px; width:50px; position:relative;
}
#test{
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0;
}

JavaScript：

$('#menu').click(function() {
    $('#test').animate({
        height: 'toggle'
        }, 290, function() {
    });
});

小提琴

编辑：为什么它起作用
我在菜单周围放置了一个容器并赋予它 style position:relative。我假设的菜单 ( #test) 已经被赋予了样式，这position:absolute意味着您可以根据 、 和 相对于包含元素定位它top（right如果它具有非默认值，因此我们给容器一个位置）。如果我们给元素 a 元素的左上角会粘在它的父元素的左上角，类似地，如果我们这样做，这个元素的左下角会粘在它的父元素的左下角。乱跑，不是吗？所以，总结一下，bottomleftpositionrelativetop:0;left:0top:0;bottom:0#test被“卡”在其父级的底部，因此它从底部开始动画。另一个要点，容器高度很重要！因为我们给出#test了一个绝对位置，它不会将容器推到它的高度，所以我们设置高度以确保#test从容器顶部加载 500px。