How can I make sure my events always fire in jQuery? [Hover callback not firing]

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