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和{ {1}}，相对于包含元素（假设它有一个left而不是默认值，因此我们给容器一个position位置）。如果我们给元素一个relative元素的左上角会粘在它的父元素的左上角，同样地，如果我们做top:0;left:0，这个元素的左下角会粘在左下角。它的父母。 漫步，不是吗？因此，总而言之，top:0;bottom:0被'卡在'它的父母的底部，因此它从底部动画。另一个快点，容器高度很重要！因为我们给了#test绝对位置，所以它不会将容器推到它的高度，所以我们设置高度以确保#test从容器顶部加载500px。

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

1 个答案: