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

[Kaue Machado 0]

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");
});
});

[Kaue Machado 0]

Ninguém ai pode me dar uma força?

Basicamente preciso que o item do menu suba um pouco no ".Hover" e volta o tanto que ele subiu quando tirar o mouse.

 

Se alguém puder ajudar eu agradeço!

[Ted k' 126]

use o -=3px ou -=3%... use as medidas

 

e para parar de fica fazendo essa animação use o

{duration: 900, queue: false}

 

qualquer duvida aqui:

http://api.jquery.com/animate/

[Kaue Machado 0]

Obrigado Ted k', mas isso ainda não impede que os itens do menu se desalinhem.

http://api.jquery.com/animate/ foi esse site que usei como base para criar o script, mas não achei nada que me ajudasse nessa parte.

 

veja como ficou, é isso mesmo que você quis dizer?

 

$(function() {

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


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


$(this).stop().animate({
opacity: 1.0,
top: '-=3',
duration: 900,
queue: 'false'
});
},


function () {


$(this).stop().animate({
opacity: 0.5,
top: '+=3',
duration: 900,
queue: 'false'
});
});
});

[Ted k' 126]

Esqueceu das unidades que cite, aqui!

 

$(function(){
var velocidade = {duration: 900, queue: false};
$(".fade").css("opacity","0.5");

$(".fade").hover(function(){
	$(this).stop().animate({opacity: 1.0, top: '-=3px'}, velocidade);
},function(){
	$(this).stop().animate({opacity: 0.5, top: '+=3px'}, velocidade);
});
});

[Eliseu M. 2]

Cuidado com os eventos. Talvez seja a a diferença entre hover e mouseenter. Tente usar este.