Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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á:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/menu-hover.jpg&key=ae7adba01cc7e23229e0227f0380ba605229e24d7391e0c64456d97b402140d2" alt="menu-hover.jpg" />
/ 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, 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.
Ótimo que conseguiu resolver o problema. :clap:
Agora que trocou para hide/show, porque não faz tudo apenas com CSS? ;P
http://cherne.net/brian/resources/jquery.hoverIntent.html
Esse plugin ajuda para evitar essa explosão de sobe e desce.
Mateus
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
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.
: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.
Você não precisa chamar estes metódos separados:
:seta: .end()
No fim, nem precisaria colocar o objeto jQuery em uma variavel. :thumbsup: