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.

This is a duplicate (it comes up fairly regularly). For example (and an answer!) see: stackoverflow.com/questions/2009151/…. — Jeff Sternal
– Jeff Sternal, Commented Jan 20, 2010 at 21:38
Thanks - I did have a look around before I posted but didn't come across this. — Mike
– Mike, Commented Jan 20, 2010 at 22:34
in case anyone reads this: try to use .prop instead .attr ;-) — juFo
– juFo, Commented Dec 7, 2016 at 7:30

munch · Accepted Answer · 2010-01-20 21:41:26Z

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()

edited Jan 20, 2010 at 21:41

answered Jan 20, 2010 at 21:36

munch

6,3214 gold badges26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Over a year ago

Thanks for the advise, but without the callbacks it changes the image before it does the first fadeOut. Solved now using .stop(), and .clearQueue() also seems to work. The jquery website says .stop() is meant to be only for animations whereas .clearQueue() is more generic, so seeing as I've got animations and the source change, would .clearQueue() be 'more' correct?

munch Over a year ago

There's no real 'more' correct here. It depends on what you want to do. stop() will halt the current animation. clearQueue() and stop(true, true) will do the same thing and remove all elements from the queue. 'Tis more a matter of preference, so if you've got it using stop, just keep it with stop.

vitto · Accepted Answer · 2010-01-20 21:52:45Z

0

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);
});

edited Jan 20, 2010 at 21:52

answered Jan 20, 2010 at 21:36

vitto

19.6k32 gold badges95 silver badges138 bronze badges

1 Comment

Mike Over a year ago

Thanks - .stop() seems to do the trick, but to get the order right the source change and fadeIn still need to be in the callback function.

Collectives™ on Stack Overflow

jquery hover problems

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related