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

First off you should be using the document ready because it just makes everything run smoother. Try the following.

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

Also, the mouseout time is really quick, that may be your problem.