CODEWITHSUNDEEP
jqueryjquery-animatebackground-color
fomicz
fomicz

Reputation: 1792

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.

Upvotes: 4

Views: 3537

Answers (2)

cusspvz
cusspvz

Reputation: 5291

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.

Upvotes: 3

jhanifen
jhanifen

Reputation: 4591

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

Upvotes: 1

Related Questions