jQuery animation repeating glitch

开发者_高级运维I have a set of inputs and I want to change their background color after hovering and then come back to the original color after mouse out.

It works fine, with one glitch. When I hover over those inputs, un-hover, and hover again, rapidly, they blink some time after. How can I fix it?

Here's my code:

    $("input").hover(
    function(){
        $(this).animate({backgroundColor: '#fff'}, 800);
},  function(){
        $(this).animate({backgroundColor: '#666'}, 1400);
    });

(I don't want to change animate times)

I've found a working example:

http://veerle.duoh.com/ - check SEARCH input - when you hover and then take mouse very fast off - it doesn't finish animation or even blink.

Hey, you must use stop() function to stop current animation, otherwise jquery will complete the animation stack (all other animations in queue) before starting your new... See jQuery queue() function docs to understand how jQuery FX works...

    $("input").hover(
    function(){
        $(this).stop().animate({backgroundColor: '#fff'}, 800);
    },  function(){
        $(this).stop().animate({backgroundColor: '#666'}, 1400);
    });

See jQuery stop() function docs.

Here is a quick tutorial on stoping jQuery from animation buildup. I have used this technique on a number of occasions.

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup