<分区>
我有一个div，它在触发点击功能时根据其高度设置动画:
$('#menu').click(function() {
$('#test').animate({
height: 'toggle'
}, 290, function() {
});
});
到目前为止效果很好。但我想从下到上为 div 设置动画，这与在 fiddle 中看到的不同。 .
有什么解决办法吗？
<分区>
我有一个div，它在触发点击功能时根据其高度设置动画:
$('#menu').click(function() {
$('#test').animate({
height: 'toggle'
}, 290, function() {
});
});
到目前为止效果很好。但我想从下到上为 div 设置动画，这与在 fiddle 中看到的不同。 .
有什么解决办法吗？
最佳答案
你可以把它放在一个容器中并绝对定位吗？:
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容器。
关于jquery - 在 jQuery 中从下到上而不是从上到下动画 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15571722/