title: jQuery animate relative position (on hover) bug,
body: <p>Whenever the following code is run in Chrome and FF (not tested in other browsers), the <code>"text"</code> goes as such , as in the image.
  The script is supposed to lift the <code>"text"</code> 4px above on <code>mouseover</code> and return it back on <code>mouseout</code></p>
  
  <p>But instead when the mouse is brought in the motion as below, each time it lifts 4px above to its last position.</p>
  
  <pre><code>$(document).ready(function(){
      $('#n #c a').hover(function(){
          $('span',this).stop(true,true).animate({top:'-=4px'},200);
      },function(){
          $('span',this).stop(true,true).animate({top:'+=4px'},400);
      });
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/bAKO8.jpg" alt="Follow the steps as such, it should be quick!"></p>
  
  <p>NOTE : In above image the text is just one, others are shown for understanding purpose.
  You have to be quick to catch the same effect.</p>