jQuery animate relative position (on hover) bug,

Question

Whenever the following code is run in Chrome and FF (not tested in other browsers), the "text" goes as such , as in the image. The script is supposed to lift the "text" 4px above on mouseover and return it back on mouseout

But instead when the mouse is brought in the motion as below, each time it lifts 4px above to its last position.

$(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);
    });
});

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.

Answer 1

I think you can just set the top to -4px on hover and 0px when the mouse exists

$(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:'0px'},400);
    });
});