Question

I have a div that when I hover over it, a div inside it animates, and then when I stop hovering, it animates back to its original position. But if I hover over it multiple times, very quickly, then the animations queue up and continue until they are finished. Example: I quickly hover over the div 10 times quickly, and the div animates 10 times while I just sit there. I don’t want these animations to queue up like this.

Here is my script:

$(".call1").hover(
    function(){
        $(".call-label").animate({"bottom": "+=50px"}, "slow");
    },
    function(){
        $(".call-label").animate({"bottom": "-=50px"}, "slow");    
    }
);​

I have a jsfiddle to illustrate the problem I am having: http://jsfiddle.net/mqpbm/

I have also tried .mouseover and .mouseout, and .mouseenter and .mouseleave. All of them do this.

Answer 1

Use .stop()

$(".call1").hover(
    function(){
        $(".call-label").stop().animate({"bottom": "50px"}, "slow");
    },
    function(){
        $(".call-label").stop().animate({"bottom": "0px"}, "slow");    
    }
);​