title: jQuery .hover() animation not smooth - Small bump/jerk on hover effect
body: <p>I have this simple jQuery hover effect, and it works, but not perfect - When you enter the list item(hover) the animation makes a small jerk/bump to the bottom, why is that? When leaving the element however, the animation is smooth (browser used - Chrome)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="div1"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a&gt;JP Links&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;JP Middel&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;JP Regs&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#div1 ul li').hover(
      function(){
          $(this).find('a').animate({'top': '0'}, 'slow');
      }, 
      function(){
          $(this).find('a').animate({'top': '75%'}, 'slow');
      }                 
  );
  </code></pre>
  
  <p>See <a href="http://jsfiddle.net/HTLRS/95/" rel="nofollow">FIDDLE</a></p>