".animate({ top: -=3" Não para de descer

Bom, bom, acabei de começar a aprender jQuery, quando digo "acabei" quero dizer que comecei a aprender ha uns 30 minutos.

Estou tentando criar um menu que tem 50% de opacidade, ao passar o mouse (.hover) ele vai para 100% de opacidade e sobe um pouco e ao tirar o mouse ele desce denovo e volta aos 50% de opacidade.

Isso eu consegui, o problema é que se você tira o mouse antes do item chegar ao topo, ele desce ainda mais.

da pra entender melhor acessando meu site de testes: http://www.imak.com.br

se você passar o mouse várias vezes bem rápido por todos os itens do menu, vai perceber que eles aos poucos vão descendo...

E então? O que eu posso fazer para que o item apenas volte à posição original e não desça infinitamente? Valeu!

este é o script:

$(function() {

$(".fade").css("opacity","0.5");

$(".fade").hover(function () {

$(this).stop().animate({
opacity: 1.0,
top: '-=3'

}, "fast");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5,
top: '+=3'

}, "fast");
});
});