慢jQuery的動畫（）鼠標懸停（）和鼠標離開（）

Question

可能重複之間：
jquery mouseleave issue when moving too slow

似乎有mouseover()和mouseleave()之間的延遲。 看着我的代碼有一個200ms/1ms過渡。 我只是不明白爲什麼兩個動畫之間存在滯後。

與使用最新版本的FF（14.0.1）17核心...

鏈接到開發站點： http://blox.comze.com/ （CSS目前僅在IE9 /鉻穩定/ FF）

的思考？

<div id="header"> 
    <div id="headerInner"> 
     <div id="power" class="menuitem"> 
      <img style="height:30px;" src="http://{url root=$context.root}static/img/leaf4.png" /> 
      <a class="menutext">&nbsp;POWER</a> 
     </div> 
     <div id="services" class="menuitem"> 
      <img style="height:30px;" src="http://{url root=$context.root}static/img/wrenchscrew.png" /> 
      <a class="menutext">&nbsp;SERVICES</a> 
     </div> 
     <div id="cashback" class="menuitem"> 
      <img style="height:30px;" src="http://{url root=$context.root}static/img/dollarsign.png" /> 
      <a class="menutext">&nbsp;CASHBACK</a> 
     </div> 
     <div id="schedule" class="menuitem"> 
      <img style="height:30px;" src="http://{url root=$context.root}static/img/calender.png" /> 
      <a class="menutext">&nbsp;SCHEDULE</a> 
     </div> 
    </div>  

</div> 

<script> 
$("#power,#services,#cashback,#schedule").mouseover(function() { 
    $(this).animate({ backgroundColor: "#333"}, 200); 
}).mouseleave(function() { 
    $(this).animate({ backgroundColor: "#000"}, 1); 
}); 
</script> 

Answer 1

首先，您應該準備使用該文檔，因爲它只是讓所有內容都運行得更流暢。嘗試以下操作。

$(document).ready(function() { 
    $("#power,#services,#cashback,#schedule").hover(function() { 
     $(this).animate({ backgroundColor: "#333"}, 200); 
    }, function() { 
     $(this).animate({ backgroundColor: "#000"}, 1); 
    }); 
}); 

此外，鼠標時間非常快，這可能是您的問題。