Question

首次加载页面时，第一次将鼠标悬停在右上角的其中一个标签上时，标签会移出比预期更远的位置，然后移回到预期位置。之后，它按预期工作。

不确定是什么导致了这一点，因为它看起来都很好。我尝试将缓动样式更改为线性，但它没有效果。我不是JQuery专家，虽然我想这可能是我的CSS的问题。

如果查看源代码显示HTML内联，则表示道歉，似乎是Dreamweaver的错误。

Answer 1

您应该将此CSS添加到li：margin: 70px 0px 0px;。此外，在Firefox中，图像具有蓝色粗边框。你应该把它们搞砸。

编辑更好的答案：

将你的jquery改为：

$("#nav li").mouseover(function(){
    $(this).stop().animate({marginTop:50},{duration:500})
});

$("#nav li").mouseout(function(){
    $(this).stop().animate({marginTop:70},{duration:500})
});

出于某种原因，它似乎以这种方式工作。

Answer 2

您的:hover元素上有li个伪类。删除否定的top属性。

Answer 3

如果要在每个li元素中设置style =“margin：70px 0px 0px 0px”内联，它将起作用。当你的第一个鼠标悬停没有可见的边缘属性内联因此jquery分配0px 0px 0px 0px这就是你看到跳跃的原因。

<li style="margin:70px 0px 0px 0px"><a href="home.php"><img src="images/home_tab.png" alt="Home" width="65" height="200" /></a></li>
<li style="margin:70px 0px 0px 0px"><a href="gallery.php"><img src="images/gallery_tab.png" alt="Gallery" width="65" height="200" /></a></li>
<li style="margin:70px 0px 0px 0px"><a href="booking.php"><img src="images/booking_tab.png" alt="Booking" width="65" height="200" /></a></li>
<li style="margin:70px 0px 0px 0px"><a href="contact.php"><img src="images/contact_tab.png" alt="Contact" width="65" height="200" /></a></li>

您也可以使用margin-top：70px并为该特定属性设置动画。

JQuery动画超调

3 个答案: