Question

Hy,

I have a problem with JQuery hover().

When I hover on the .sectionUpImage , it triggers the animation. The problem is when I leave that area, the animation is still running and it will run until it finishes and then it will return to original state.

So the problem is when I’m not hovering the .sectionUpImage, I want the animation to stop and return to it’s original state.

Code:

$(document).ready(function(){

    $('.sectionUpImage').hover(function(){

        $('.sectionUp').animate({"height": "+=314px"}, "slow");

    },function(){

        $('.sectionUp').animate({"height": "-=314px"}, "slow");

    });

});

How to apply that ?

Thank you

Answer 1

Adam was spot on with using stop() to keep the animations from continuing. However, since you’re using relative heights, you’ll run into the issue of calculating a new height based on the current height of a half animated element. Two ways of fixing that:

One: Switch to absolute heights. Your current jQuery will work perfectly then. Something like:

$(document).ready(function(){
    $('.sectionUpImage').hover(function(){
        $('.sectionUp').animate({"height": "314px"}, "slow");
    },function(){
        $('.sectionUp').animate({"height": "0px"}, "slow");
    });
});

Two: Use stop( false, true ). This will jump an interrupted animation to its final state before starting a new animation. This might look a bit jarring, but will at least prevent any incorrect final heights.

http://api.jquery.com/stop/