[Resolvido] Menu subindo e descendo sozinho

[fernandotholl 19]

Bom dia Pessoal,

 

O Willian, Diego e outros colegas me ajudaram a deixar o css do menu que desenvolvi 100%.

 

Mais agora tenho outro problema, o menu se eu passar o mouse 4 vezes bem rápido sobre a <li> pai, o mesmo dispara o efeito que faz aparecer o menu as 4 vezes, sendo que se eu passar o mouse pela primeira vez, e depois na segunda, deve cancelar a primeira ação.

 

Veja o meu código como está:

 

 

/* Menu Principal */    
   $("#menu ul li ul").hide();    
   $("#menu ul li").hover(
function(){            
           $(this).find("ul:first").slideDown(700);
           $(this).closest('li').css({ 'background' : 'url("imagens/menu-bg-hover.jpg")', 'background-repeat' : 'repeat-x'});
           $(this).closest('li').find('a:not(.sub)').css({'color' : '#1C5A8C'});

       },
function(){
           $(this).find("ul:first").slideUp(700);
           $(this).closest('li').css({'background' : 'none'});
           $(this).closest('li').find('a:not(.sub)').css({'color' : '#fff'});
       }
   );

 

Eu preciso adicionar um delay, ou algo que interrompa a ação do mousehover se o mesmo ocorrer repetidas veses.

 

Infelizmente não posso enviar o sistema funcionando, pois não tenho acesso a FTP aqui na empresa.

 

Se alguem puder me ajudar

[JCMais 75]

Isso ocorre porque no momento que você passa o mouse várias vezes sobre o menu, o hover é disparado várias vezes também, fazendo com que várias animações sejam executadas. Porém o jQuery executa essas animações uma por uma, pois elas são adicionadas à uma queue interna. Para resolver esse problema execute o metódo stop() antes de efetuar o slide no menu.

 

Esse menu ta possuído

:lol:

 

Edit:

 

Você pode melhorar esse seu código, ele está mal optmizado, primeiramente, não crie vários objetos jQuery para o mesmo elemento, crie apenas uma vez, e o guarde em uma variavel.

var $this = $( this );

 

Você não precisa chamar estes metódos separados:

$(this).find("ul:first").slideDown(700);
$(this).closest('li').css({ 'background' : 'url("imagens/menu-bg-hover.jpg")', 'background-repeat' : 'repeat-x'});
$(this).closest('li').find('a:not(.sub)').css({'color' : '#1C5A8C'});

 

:seta: .end()

 

$this.find( 'ul:first' ).slideDown( 700 ).end()
    .closest( 'li' ).css( { 'background' : 'url("imagens/menu-bg-hover.jpg")', 'background-repeat' : 'repeat-x' } )
    .find( 'a:not(.sub)' ).css( {'color' : '#1C5A8C'} );

 

No fim, nem precisaria colocar o objeto jQuery em uma variavel. :thumbsup:

[fernandotholl 19]

JCMais, você é o cara, tirou o :devil: que tinha nesse menu.

 

Porém tive que fazer uma alteração, tive que remover o slide e colocar apenas show() e hide(). Pois como colocava tempo na minha animação, se eu passar o mouse novamente e o menu não tiver recolhido completamente, ele definitivamente da um stop() na animação, e não volta mais. Tirando isso, não dá tempo de um Noob (EU) passar o mouse 1 milhão de vezes no menu.

 

Veja como ficou meu código com as correções:

 

/* Menu Principal */    
   $("#menu ul li ul").hide();    
   $("#menu ul li").hover(
function(){ 
           $(this).find('ul:first').stop().show().end()
           .closest( 'li' ).css( { 'background' : 'url("imagens/menu-bg-hover.jpg")', 'background-repeat' : 'repeat-x' } )
           .find( 'a:not(.sub)' ).css( {'color' : '#1C5A8C'} );

       },
function(){
           $(this).find("ul:first").hide().end()
           .closest('li').css({'background' : 'none'})
           .closest('li').find('a:not(.sub)').css({'color' : '#fff'});                                   
       }
   );

 

Você pode melhorar esse seu código, ele está mal optmizado, primeiramente, não crie vários objetos jQuery para o mesmo elemento, crie apenas uma vez, e o guarde em uma variavel.

 

Cara, muito obrigado, estudei isso no curso de jQuery que fiz, mais acabei esquecendo sua utilidade.

[JCMais 75]

Ótimo que conseguiu resolver o problema. :clap:

 

Agora que trocou para hide/show, porque não faz tudo apenas com CSS? ;P

[Mateus Avila Isidoro 8]

http://cherne.net/brian/resources/jquery.hoverIntent.html

 

Esse plugin ajuda para evitar essa explosão de sobe e desce.

 

Mateus

[fernandotholl 19]

Cara, simplesmente perfeita sua dica.

 

Tive que remover o efeito do slideup para não dar tempo de explodir esse problema, vou pode colocar novamente o efeito bacana com esse plugin.

 

Obrigado mesmo