title: Losing hover when animating with jQuery (without moving mouse)
body: <p>I have this row of thumbnails that I am animating with jQuery.<br />
  Each of these thumbnails has a hover and active class.</p>
  
  <p>They work fine but when I animate the list, the new thumbnail under the mousecursor does not apply the hover? I have to move the mouse a little bit after each click?</p>
  
  <p>It's kinda difficult to exaplain.. I have made a fiddle here: <a href="http://jsfiddle.net/nZGYA/" rel="nofollow">http://jsfiddle.net/nZGYA/</a><br />
  When you start clicking after thumb 3 without moving the mouse you see what I mean...</p>
  
  <p>It works fine in FireFox, NOT Safari, Chrome, IE etc.<br />
  Is there something I can do about this?</p>
  
  <p>For reference here is my code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver;  }            
      ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; }
      li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; }
      #list-2 li a { display: block; width: 120px; height: 80px; outline: none; }
      #list-2 li a:hover { background: teal; }
      #list-2 li a.active { background: navy; }
  &lt;/style&gt;
  
  $(document).ready(function() {
      var idx_2 = 0;
      $('#list-2 li a')
      .click(function() {
          $('#list-2 &gt; li a').removeClass('active');
          $(this).addClass('active');         
          var id =  $('#list-2 li a.active').data('index') - 2;
          idy = Math.max(0, id * 90);
          $(this).parent().parent().animate({ 'top' : -idy + 'px' });
          return false;
      })
      .each(function() {
          $(this).data('index', idx_2);
          ++idx_2;
      });
  });
  
  &lt;div class="container"&gt;
      &lt;ul id="list-2"&gt;
          &lt;li&gt;&lt;a class="active" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>