導航元素在懸停時上下跳動

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

，這是因爲你已經合併懸停及移出事件。你只需要懸停。

懸停有兩個函數調用組成：Mousevoer和mouseout。你可以按順序調用它們，所以你在mousever上的代碼只是在懸停事件上進行。

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

}）;

但是，您需要確保爲ul設置適當的寬度，否則懸停將無法正常工作。是否有默認的寬度設置？