jquery hover problems

Question

I'm trying to change a website's logo (logoName.png) to other images (logoHome.png, logoEvents.png, etc.) when the user hovers over buttons on the navigation menu (#home, #events, etc.) with the script below. This works fine when the timings are set to 0 and everything happens instantaneously, but when I slow things down it's not doing what I want it to.

If the user moves the mouse away from the button before the hover animation is finished then it doesn't revert back to the logo, and if the user moves directly between different nav buttons, it shows the logo instead of the navigation image for the button the mouse is now on.

I've tried using hover, mouseenter/leave and mouseover/out to no avail. Is there any way of handling the queue better? Or should I give hoverIntent a try?

All suggestions appreciated - I'm new to all this! Thanks.

$('#home').hover(function() {
    $('#logo').hide(
        500,
        function() {
            $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image
        });
}, function() {
    $('#logo').hide(
        500,
        function () {
            $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back
        });
});

$('#events').hover(function() {
    $('#logo').hide(
        500,
        function() {
            $('#logo').attr ('src', 'images/logoEvents.png').fadeIn(500); //swaps logo for events image
        });
}, function() {
    $('#logo').hide(
        500,
        function () {
            $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back
        });
});

EDIT: - Working version for anyone who's interested:

$('#home').hover(function() {
    $('#logo').stop(true, true).fadeOut(
        500,
        function() {
            $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image
        });
    }, function() {
$('#logo').stop(true, true).fadeOut(
    500,
    function () {
        $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back
    });
});

etc

Thanks for your help.

Answer 1

Have you tried doing it without the callbacks?

$('#home').hover(function() {
    $('#logo').fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500);
}, function() {
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});

$('#events').hover(function() {
    $('#logo').fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500);
}, function() {
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});

Another option is the new jQuery function .clearQueue()

Answer 2

try to use the .stop() method to interrupt the previous easing

$('#home').hover(function() {
    $('#logo').stop().fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500);
}, function() {
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});

$('#events').hover(function() {
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500);
}, function() {
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});