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

小提琴

编辑:为什么它工作
我在菜单周围放置了一个容器并给它样式position:relative.我认为什么是菜单(#test)已经给出了风格position:absolute这意味着你可以根据其定位top,right,bottom并且left,相对于包含元素(只要它有一个position默认值以外,因此我们给容器中的relative位置).如果我们给元素一个元素的top:0;left:0左上角会粘在它的父元素的左上角,类似地,如果我们做top:0;bottom:0了这个元素的左下角会粘在它的父元素的左下角.漫步,不是吗？因此,总而言之,它#test是"卡在"它的父母的底部,因此它从底部动画.另一个快点,容器高度很重要!因为我们给出#test了绝对位置,所以它不会将容器推到它的高度,所以我们设置高度以确保#test从容器顶部加载500px.