title: How can I make sure my events always fire in jQuery? [Hover callback not firing]
body: <p>I have a BG image animation that relies on the <code>hover</code> 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.</p>
  
  <p>Is there a more bulletproof way to write this function?</p>
  
  <pre><code>$('.nav li a').hover(function() {
      $(this).addClass('hovered', 300);
  }, function() {
      $(this).removeClass('hovered', 300);
  });
  </code></pre>
  
  <p>(it uses a <a href="http://plugins.jquery.com/project/backgroundPosition-Effect" rel="nofollow noreferrer">BGimg plugin</a> to support the speed parameter on add/removeClass)</p>
  
  <p>Testable here: <a href="http://www.mcphersonindustries.com" rel="nofollow noreferrer">McPherson Industries</a></p>