jQuery animation unwanted repeats :)

Question

And some question once again.

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 those inputs, then take mouse back, then hover them again and take mouse back etc. rapidly - they're blinking some time after. How to avoid 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 working (well) example:

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

Answer 1

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

Answer 2

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.