Question

I have code for an image hover that will display information on top of an image when hovered over. By using the queue:false in the callback, I have stopped the animations from firing over and over when the user hovers over them multiple times.

My issue is, if one got a bit crazy with the mouseOverING, the fading in/out of the hover state will diminish the information’s opacity until the hover image is no longer visible.

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});

Here is my jsfiddle, if you feel like playing around.

http://jsfiddle.net/bkbarton/qrprD/

Thanks

Answer 1

Try a .stop(true) on the element before starting the next animation. This will stop the eventually current animation in progress.