我正在构建一个菜单,该菜单由沿标题图像底部的一系列 div 组成,这些 div 旨在在悬停时向上扩展至指定高度。
我有一个JSFiddle几乎可以完成我想要的,但是由于某种原因,当光标在它上面时,div 会跳到容器的顶部。我想知道导致这种行为的 JS(或者可能是 CSS)中缺少什么。我还添加了一张图片来帮助展示所需的效果。
一如既往,非常感谢任何帮助!
我正在构建一个菜单,该菜单由沿标题图像底部的一系列 div 组成,这些 div 旨在在悬停时向上扩展至指定高度。
我有一个JSFiddle几乎可以完成我想要的,但是由于某种原因,当光标在它上面时,div 会跳到容器的顶部。我想知道导致这种行为的 JS(或者可能是 CSS)中缺少什么。我还添加了一张图片来帮助展示所需的效果。
一如既往,非常感谢任何帮助!
查看您的 JSFiddle,我不确定我是否明白您为什么还要为 top 属性设置动画,没有它的代码:
$("#pagebuttonhome").hover(function() {
$("#pagebuttonhome").animate({'height': '80px'});
}, function() {
$("#pagebuttonhome").animate({'height': '30px'});
});
我相信按您的预期工作。
这也可以单独使用 CSS(带有过渡)来完成,如果您对该解决方案感兴趣,请告诉我
注意:仅 CSS 的解决方案与任何不支持过渡的浏览器不兼容
如果将元素设置position
为absolute
然后设置top
orleft
值,则这些值将被解释为相对于原点 (0,0)。使用marginTop
/marginLeft
代替,如此处所示。
由于已经在 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'});
});