Jquery 导航元素在悬停时上下跳跃

尝试使用。设置动画使滑动元素具有绝对位置。由于某种原因，元素在悬停时开始上下跳跃。

UL

的默认高度是

56px

，我希望悬停时它扩展到

469px

：

$(function() {

$('nav ul').hover(function(){
    $(this).animate({height:'469px'},'slow');
    });
$('nav ul').mouseout(function(){
    $(this).animate({height:'56px'},'slow');
    }); 

});

HTML是：

<nav>
    <ul>
      <li class="active"><a href="#">Menu Icon</li><!--visible menu icon-->
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul>
</nav><!--end nav-->

这是因为您将悬停和鼠标移出事件组合在一起。你只需要停下来

hover有两个函数调用组成它：mousevore和mouseout。您按顺序调用它们，因此mousever上的代码只会在hover事件中出现

$(function() {
$('nav ul').hover(
    function(){
        $(this).animate({height:'469x'},'slow');
    },
    function(){
         $(this).animate({height:'56px'},'slow');
    }    
);

}))

---

但是，您需要确保为ul设置了适当的宽度，否则悬停将无法正常工作。是否设置了默认宽度？

正确的代码为：

$('nav ul').hover(function(){
    $(this).animate({height:'469px'},'slow');
}, function() {
    $(this).animate({height:'56px'},'slow');
});