Menu repete ação direto (jquery)

[tiujhou 7]

Estou fazendo um menu, quando passo o mouse por cima da da div: #menu ul li a ... ele criar um <span class="mostra"></span> com append... o problema acontece quando passo o mouse encima de uma li e depois na outra li e fico retornando em uma e outra rapidamente...

O append acaba criando varios span ... como estou usando opacidade, fica aparecendo uma emcima da outra e a div acaba ficando mais escura... pois uso um hover que faz o Span(append) crescer e diminuir...

 

 

Este é o exemplo que faz o span aparecer e aumentar de tamanho:

$('#menu ul li a').hover(function(){
	var id = $(this).attr('title');
	$(this).append("<span class='mostra'>"+id+"</span>");
	$(".mostra").animate({height:'100%', opacity:'0.6'}, 200)

 

quando tiro o mouse ele faz com que a div diminua e depois remove, tudo isso usando animate...

 

Como faço para não deixar o append criar um novo span até que este tenha removido o que aparecia ao passar o mouse pela primeira vez...?????

 

Até mais...

[Lucas Guima 164]

Se não me engano, é assim que corrige:

 

$(".mostra").stop().animate({height:'100%', opacity:'0.6'}, 200)

[tiujhou 7]

Então lucaas... eu já havia utilizado stop() e nada feito... dá erro... ele continua criar diversos Span com o append... sem eliminar o span anterior...

[Lucas Guima 164]

Em nenhum lugar você elimina o anterior. Deve ser por isso.

[tiujhou 7]

Em nenhum lugar você elimina o anterior. Deve ser por isso.

Sim eu elimino... mas fazendo animate com o callback eu do $(this).remove(); ... ele remove... como o animate é de 200 ... enquanto ele volta ele criar outro...

[Lucas Guima 164]

Posta o código completo então.

[tiujhou 7]

$(document).ready(function(){
$('#menu ul li a').hover(function(){
	var id = $(this).attr('title');
	$(this).append("<span class='aparecer'></span><span class='mostra'>"+id+"</span>");
	$(".mostra").animate({height:'100%', opacity:'0.6'}, 200)

}, function(){
	$(".mostra, .mostra-letras").animate({height:'40%'}, 200,function(){
		$(this).remove();
	})


})
});

 

 

Talvez tenha algo diferente... pois estou fazendo algumas modificações;;;;

[Lucas Guima 164]

E o HTML?

[tiujhou 7]

O html é o básico ...

 

 

        
<div id="menu"><!--menu-->
       	<ul>
           	<li class="menu-home"><a href="" title="HOME"></a></li>
               <li class="menu-sobre"><a href="" title="SOBRE"></a></li>
               <li class="menu-comentarios"><a href="" title="COMENTÁRIOS"></a></li>
               <li class="menu-configuracoes"><a href="" title="CONFIGURAÇÕES"></a></li>
               <li class="menu-contato"><a href="" title="CONTATO"></a></li>
</ul>

 

css... é mais ou menos assim...

 

#menu ul{ list-style:none; }
#menu ul li{ display:inline; }
#menu ul li a{float:left;}
li.menu-home a{ width:120px; height:120px; background:#2B87EC url(imagens/menu/home.png) no-repeat; position:relative;}
li.menu-sobre a{ width:120px; height:120px; background:#5DA818 url(imagens/menu/sobre.png) no-repeat;  margin:0 0 0 10px;position:relative;}
li.menu-comentarios a{ width:250px; height:120px; background:#0D747B url(imagens/menu/comentarios.png) no-repeat;margin:0 0 0 10px;position:relative;}
li.menu-configuracoes a{width:120px; height:120px; background:#AD2043 url(imagens/menu/configuracoes.png) no-repeat; margin:0 0 0 10px;position:relative;}
li.menu-contato a{ width:250px; height:120px; background:#5434AF url(imagens/menu/contato.png) no-repeat; margin:0 0 0 10px;position:relative;}

a span.mostrar{position: absolute; left:0; top:0; background:#000; width:100%; height:0%; text-decoration:none; }
a span.mostrar-letras{ font-size:12px; color:#FFF; position:absolute; bottom:10px; left:0; text-align:center; }

[Lucas Guima 164]

O html é o básico ...

[...]

css... é mais ou menos assim...

[...]

 

LOL :wacko:

 

Vê se é isso o que você precisa:

 

$(document).ready(function(){
   $('#menu ul li a').hover(function(){
       var id = $(this).attr('title');
       $(this).html('<span class="aparecer"></span><span class="mostrar">' + id + '</span>');
       $('.mostrar').animate({height:'100%', opacity:'0.6'}, 200)
   }, function(){
       $('.mostrar, .mostrar-letras').animate({height:'40%'}, 200, 
       function(){
           $(this).prev().remove();
           $(this).remove();
       })
   })
});

[Ismaeldm 5]

Faça o seguinte, apenas acrescente uma função no inicio do hover...

 

$(document).ready(function(){
$('#menu ul li a').hover(function(){
	$(this).find('span').remove();
	var id = $(this).attr('title');
	$(this).append("<span class='aparecer'></span><span class='mostra'>"+id+"</span>");
	$(".mostra").animate({height:'100%', opacity:'0.6'}, 200)

}, function(){
	$(".mostra, .mostra-letras").animate({height:'40%'}, 200,function(){
		$(this).remove();
	})


})
});

 

Desta forma, caso ja tenho um span no local onde o mouse foi posicionado, ele irá remove-lo para depois executar o código novamente.

[tiujhou 7]

Obrigado os dois por tentar ajudar... tipo agora ele remove, só fica 1 span ...

Mas ocorre outro problema... ele não deixa o hover(mouseout) fazer o efeito... ele remove o span antes do termino...

 

dai o que acredito que deveria ser feito... era adicionar o novo span de onde o que foi removido parou(fazendo o efeito mouseover) ou não adicionar o span(caso tenha algum com efeito mouseout) e dar continuidade de onde ele está com o efeito hover(mouseover)...

 

Se vocês conhecerem alguma função ou maneira para que isso possa ser feito...

 

Até mais...

[Lucas Guima 164]

Se eu entendi, dá essa impressão porque você define o height como 40%, ou seja, ele para no meio e então é removido.

[tiujhou 7]

Sim entendi o que você disse... realmente p-elo fato de ter 2 span com position absolute ele acabou aumentando a div... dai eu coloquei 40% para isso não acontecer... e ela acaba desaparecendo quando chega a 40% da div...

 

Mas mesmo assim... se você se você mudar de uma li para outra sucessivamente... se o span estiver em 100% na li, ele retorna do zero no mouseOver...

 

Eu já havia feito algumas coisas com jquery... no qual ele retornava do ponto de onde estava a DIV ... mas como usei append... para criar o span eu tenho que deletar esse span... irei criar os spans direto no arquivo... dai dou um display none e block ... acredito que assim deve dar certo...

 

Mas se tiver alguma sugestão... Flws e até mais...