JS扩展部门的定位

Question

我正在构建一个菜单，其中包含一个标题图像底部的一系列div，这些div设计为在悬停时向上扩展到指定的高度。

我有一个JSFiddle几乎完成了我想要的东西，但由于某种原因，当光标在它上面时，div跳到容器的顶部。我想知道我在JS（或可能是CSS）中缺少什么导致了这种行为。我还添加了一张图片来帮助显示所需的效果。

一如既往，非常感谢任何帮助！

Answer 1

看着你的JSFiddle，我不确定我是否也知道你为什么要为顶级属性设置动画，没有它的代码：

$("#pagebuttonhome").hover(function() {
    $("#pagebuttonhome").animate({'height': '80px'});
}, function() {
    $("#pagebuttonhome").animate({'height': '30px'});
});

我相信你的工作正常。

这也可以单独使用CSS（带过渡），如果您对该解决方案感兴趣，请告诉我

注意：仅限CSS的解决方案与任何不支持转换的浏览器都不兼容

Answer 2

如果您将元素的position设置为absolute，然后设置top或left值，那么这些值将被解释为相对于原点（0,0） ）。请改为使用marginTop / marginLeft，如here所示。

Answer 3

由于bottom: 0px已在CSS中定义，因此您无需在动画时定义top属性。您可以简单地重新定义height，它将按预期工作。以下是示例：http://jsfiddle.net/DbTyX/20/

$("#pagebuttonhome").hover(function() {
    $("#pagebuttonhome").animate({'height': '80px'});
}, function() {
    $("#pagebuttonhome").animate({'height': '30px'});
});

只是为了优化，您还可以使用this关键字：

$("#pagebuttonhome").hover(function() {
    $(this).animate({'height': '80px'});
}, function() {
    $(this).animate({'height': '30px'});
});