title: jQuery stop animation on focus hover
body: <p>I'm working on a UI module: a search form that shows/hide depending if the user has hovered over a target area, or still has focus on the input text field. I just have another tweak to take care off...</p>
  
  <p>I want to be able to cancel the animation (e.g. fadeout) if I happen to hover over the target area. At the moment, stop() doesn't seem to do the job.</p>
  
  <p>Tips greatly appreciated. TIA</p>
  
  <hr>
  
  <p>Here's the demo:</p>
  
  <p><a href="http://jsfiddle.net/s2wEu/" rel="nofollow">http://jsfiddle.net/s2wEu/</a></p>
  
  <p>The current script:</p>
  
  <pre><code>var topbar_search_hotspot =  $('form[role="search"]');
  var topbar_search_hideshow = $('form[role="search"] .row');
  
  function fadeOutSearch() {
      var element = $('#s');
      if (!element.hasClass("focus") &amp;&amp; !element.hasClass("hover") &amp;&amp; element.val() == "") {
          $('form[role="search"] .row:visible').fadeOut("slow");
      }
  }
  
  topbar_search_hotspot.blur(function() {
      topbar_search_hideshow.removeClass("focus");
      setTimeout(fadeOutSearch, 1000);
  }).focus(function() {
      $(this).addClass("focus");
  });
  
  topbar_search_hideshow.hide();
  topbar_search_hotspot.hover(function() {
      if (topbar_search_hideshow.is(':animated')) {
          topbar_search_hideshow.stop().animate({opacity:'100'});
      } else {
          topbar_search_hideshow.fadeIn("slow");
      }
  }, function(e) {
      setTimeout(fadeOutSearch, 1000);
      topbar_search_hotspot.removeClass("hover");
  });
  
  topbar_search_hotspot.hover(function() {
      $(this).addClass("hover");
      $('#s').focus();
  }, function(){
      setTimeout(fadeOutSearch, 1000);
      $(this).removeClass("hover");
  });
  </code></pre>