JQuery анимировать относительную позицию (при наведении) ошибка,

Question

Всякий раз, когда следующий код выполняется в Chrome и FF (не тестировался в других браузерах), "text" выглядит так, как на рисунке.Сценарий должен поднять "text" 4px выше на mouseover и вернуть его обратно на mouseout

Но вместо этого, когда мышь приводится в движение, как показано ниже, каждый раз, когда она поднимает 4px выше дляего последняя позиция.

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

ПРИМЕЧАНИЕ. На приведенном выше изображении текст только один, другие показаны для понимания цели.Вы должны быть быстрыми, чтобы поймать тот же эффект.

Answer 1

Я думаю, что вы можете просто установить верхнюю часть на -4px при наведении и 0px, когда мышь существует

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