如何确保我的事件始终在jQuery中触发？ [悬停回调未触发]

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.

Answer 2

What is the 300 value in the addClass method ? it does not take two parameters.. just one
Api reference: http://api.jquery.com/addClass/ ( ok,noticed the plugin )

It works just fine for me .. all links revert back to their original image, no-matter how fast i move the mouse..

Update

Ok i see the problem now..

• Chrome is OK ( the only one it seems.. )
• Firefox shows the problem..
• IE shows the problem

Update 2 It seems to me that the problem is with the plugin you use.. It ignores queued requests to the same object until the current animation has finished.. So if you hover out before the first one has completed it will not return to normal..

I can't help more on this, sorry ..