Question

I have the following hover script which works on my nav link images:

$("nav a").hover(
    function() {
        $(".current", this).animate({
            opacity: 1
        }, {
            duration: 300,
            specialEasing: {
                opacity: 'linear',
            },
});
    }, function() {
        $(".current", this).animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

});
});

I am wondering there is a way of intercepting the animation if the user moves the cursor out of the hover div and then back into it before the original animation has finished. If the user moves the cursor back into the div I would want the animation to fade the opacity of the image in the .current div to 1 immediately.

I hope this is clear, and would be glad of any help.

Thanks,

Nick

Answer 1

You can use jQuery’s stop() function (info) to cancel the animation. Change the first line of the enter function to this:

    $(".current", this).stop().animate({

This stops the animation and immediately returns the opacity to 1.