Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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");
});
});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:
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'
});
});
});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);
});
});Cuidado com os eventos. Talvez seja a a diferença entre hover e mouseenter. Tente usar este.
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!