Ajii Noguerra
Ajii Noguerra

Reputation: 69

Stop Jquery animation on mouse over or hover

I want to stop or clear the animation of an element while it is being hovered and return when the its not. Here's my code:

function blink(){
        $('#unitedkingdom, #germany, #korea, #philippines,
        #indonesia').delay(400).fadeTo(800,0.7).delay(800).fadeTo(800,1, blink);
    }

    $(document).ready(function(){

            blink();

        $('#unitedkingdom').hover(function(){
            $(this).stop(blink); //I'm trying to STOP the function i declared from above
            $('#uk').animate({opacity:1},300);
        });
        $('#germany').hover(function(){
            $('#ger').animate({opacity:1},300);
        });
        $('#korea').hover(function(){
            $('#kor').animate({opacity:1},300);
        });
        $('#philippines').hover(function(){
            $('#phil').animate({opacity:1},300);
        });
        $('#indonesia').hover(function(){
            $('#ind').animate({opacity:1},300);
        });
    }); 

Is there a work around for this?

Upvotes: 0

Views: 6021

Answers (1)

James Kleeh
James Kleeh

Reputation: 12228

You want this:

$(this).stop(true);

jQuery .stop() docs - http://api.jquery.com/stop/

Upvotes: 2

Related Questions