Question

I have a BG image animation that relies on the hover callback to revert to it’s original state. If I move the mouse quickly over the links, the hovered state sticks. My guess is that I’m moving the mouse off before the first animation completes, so the callback doesn’t register.

Is there a more bulletproof way to write this function?

$('.nav li a').hover(function() {
    $(this).addClass('hovered', 300);
}, function() {
    $(this).removeClass('hovered', 300);
});

(it uses a BGimg plugin to support the speed parameter on add/removeClass)

Testable here: McPherson Industries

Answer 1

This is a common problem and cannot be fixed, I’m afraid – it’s up to the browser to keep up with events, and if it can’t, well, you’re out of luck.

It might be jQuery’s fault also, though. Hard to say without dwelling into the source code. Anyways, there’s a easy workaround:

$('.nav li a').hover(function() {
    // When element is hovered, remove hovered state from all elements..
    $('.hovered').removeClass('hovered');
    // ..and add it to this one.
    $(this).addClass('hovered', 300);
}, function() {
    // This is only needed when exiting an element and not enterin another one
    $(this).removeClass('hovered', 300);
});

This might not be 100% certain, but it’s better than your current.