Question

尝试使用.animate来获得具有绝对定位的滑动元素。出于某种原因，元素在悬停时开始上下跳跃。 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-->

Answer 1

正确的代码是：

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

http://api.jquery.com/hover/

Answer 2

这是因为你结合了悬停和鼠标输出事件。你只需要悬停。

hover有两个包含它的函数调用：Mousevoer和mouseout。你按顺序调用它们，所以你在mousever上的代码只是继续悬停事件。

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

}）;

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

导航元素在悬停时上下跳动

2 个答案: