在jQuery中从下到上动画div而不是从上到下[重复]

Question

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

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

到目前为止效果很好。但我想从下到上为div 设置动画，这与fiddle 不同。

有什么办法吗？

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

Fiddle

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