javascript - JS扩展div的定位

Question

我正在构建一个菜单，该菜单由沿标题图像底部的一系列 div 组成，这些 div 旨在在悬停时向上扩展至指定高度。

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

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

Answer 1

查看您的 JSFiddle，我不确定我是否明白您为什么还要为 top 属性设置动画，没有它的代码：

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

我相信按您的预期工作。

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

注意：仅 CSS 的解决方案与任何不支持过渡的浏览器不兼容

Answer 2

如果将元素设置position为absolute然后设置toporleft值，则这些值将被解释为相对于原点 (0,0)。使用marginTop/marginLeft代替，如此处所示。

Answer 3

由于已经在 CSS 中定义了，所以在制作动画时bottom: 0px不需要定义属性。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'});
});