Question

I am working on a project containing a lot of hoverable divs. I wrote an animation that does this :

On mouseover, an image fades out, and as a callback, a div containing information fades in. then on mouse out, the info div fades out, and as a callback the image fades back in. I’m using the hoverIntent plugin.

My problem is that if you stay long enough over the div, everything works fine. But if you stay say 300ms on it , the animation stops, but the callback showing the info div is still called, ignoring the mouse out event. That results in having the info div staying permanently…

Here is my code :

 var infoPaneSettings = {
    sensitivity: 3,
    interval: 200,
    timeout: 500,
    over: showPane,
    out: hidePane

    }   

function showPane() {
    var entry = $(this);
    $('.featured_img', entry).fadeTo(1000, 0, 
        function(){
        $('.infoPane', entry).fadeTo(200, 1);
        });


}

function hidePane() {
    var entry = $(this);
    $('.infoPane', entry).fadeTo(300, 0, 
        function(){
        $('.featured_img', entry).fadeTo(200, 1);
        });
}

$('.entry').each(function(){
    $(this).hoverIntent(infoPaneSettings);
});

I hope you can help me !

Answer 1

Use http://api.jquery.com/stop/ on the element before starting the new animation. It will prevent running the callback.