jquery - slow jQuery animate() between mouseover() and mouseleave()

Question

Possible Duplicate:
jquery mouseleave issue when moving too slow

There seems to be a delay between mouseover() and mouseleave(). Looking at my code there is a 200ms/1ms transition. I just dont understand why there is lag between the two animations.

Using i7 core with latest version FF(14.0.1)...

Link to dev site: http://blox.comze.com/ (CSS currently only stable in IE9/chrome/FF)

Thoughts?

<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);
    });
});

此外，鼠标移出时间非常快，这可能是您的问题。