Problema com stop();
Bom dia a todos!
Eu nunca havia usado stop(); e estou enfrentando problemas para conseguir entender e faze funciona do jeito certo. Acabei lendo aquele post sobre ele no imasters, mas não está dando certo, será que alguem pode da uma forcinha?
Toda vez que passava o mouse por cima de vários botões ao mesmo tempo, aconteciam muitos efeitos inesperadas, o menu se tornava desenfreadamente louco..
Fui tentando fazer igual ao tópico, colocar o stop na ultima linha, não conseguia o efeito desejado, o código padrão do meu menu era:
$('.btn-menu').hover(function() {
$(this).children('.menu-drop').slideDown(200);
$(this).children('.btn-menu-img').css('background', 'url(img/btn-menu-hover.png) no-repeat');
$(this).children('.btn-menu-img').css('color', '#fff');
$(this).children('.btn-menu-img').css('font-weight', 'bold');
}, function() {
//$(this).children('ul.menu-drop').stop(true, true)
$(this).children('.menu-drop').slideUp(200);
$(this).children('.btn-menu-img').css('background', 'url(img/btn-menu.png) no-repeat');
$(this).children('.btn-menu-img').css('color', '#414042');
$(this).children('.btn-menu-img').css('font-weight', 'normal');
});
$('.menu-drop').find('li').hover(function() {
$(this).children('.sub-menu-drop').slideToggle(70);
$(this).children('.sub-menu-drop').css('display', 'block');
$(this).children('.sub-menu-drop').css('cursor', 'pointer');
}, function() {
$(this).children('.sub-menu-drop').slideToggle(70);
$(this).children('.sub-menu-drop').css('cursor', 'default');
});
Depois de várias tentativas de inserir o stop no lugar coreto, acabou dando mais ou menos certo... atualmente ele etá esse jeito:
$('.btn-menu').hover(function() {
$(this).children('.menu-drop').stop(true, true).slideDown(200);
$(this).children('.btn-menu-img').css('background', 'url(img/btn-menu-hover.png) no-repeat');
$(this).children('.btn-menu-img').css('color', '#fff');
$(this).children('.btn-menu-img').css('font-weight', 'bold');
}, function() {
//$(this).children('ul.menu-drop').stop(true, true)
$(this).children('.menu-drop').stop(false, true).slideUp(200);
$(this).children('.btn-menu-img').css('background', 'url(img/btn-menu.png) no-repeat');
$(this).children('.btn-menu-img').css('color', '#414042');
$(this).children('.btn-menu-img').css('font-weight', 'normal');
});
$('.menu-drop').find('li').hover(function() {
$(this).children('.sub-menu-drop').stop(true, true).slideToggle(70);
$(this).children('.sub-menu-drop').css('display', 'block');
$(this).children('.sub-menu-drop').css('cursor', 'pointer');
}, function() {
$(this).children('.sub-menu-drop').stop(true, true).slideToggle(70);
$(this).children('.sub-menu-drop').css('cursor', 'default');
});
Mais ou menos certo porque a loucura do menu foi embora, mas, quando eu uso o evento click para dar load com ajax, já não funciona mais nada, o conteudo carrega, mas o menu apenas desce, porém sem as animação.. =/
Isso deve acontecer provavelmente pq o stop() quebrou a fila das animações.. POderia alguém me dar um help?
Obrigado!
Já ia me esquecendo..s estrutura do menu é a seguinte
<div id="nav-global">
<ul class="ct-horizontal">
<li class="btn-menu ajax-empresa" id="sobre">
<div class="btn-menu-img">Empresa</div>
</li>
<li class="btn-menu" id="solucoes">
<div class="btn-menu-img"><a class="ajax-solucoes">Soluções</a></div>
</li>
<li class="btn-menu" id="produtos">
<div class="btn-menu-img ajax-produtos">Produtos</div>
<ul class="menu-drop">
<li class="primeira-linha"><div class="ajax-produtos">Roadnet Suite™</div>
<ul class="sub-menu-drop sub-roadnet">
<li class="primeira-linha ajax-roadnet">Roadnet™</li>
<li class="line">_______________________</li>
<li class="ajax-territory">Territory Planner™</li>
<li class="line">_______________________</li>
<li class="ajax-fleet">Fleet Loader™</li>
<li class="line">_______________________</li>
<li class="ajax-mobile">Mobile Cast™</li>
<li class="line">_______________________</li>
<li class="ultima-linha ajax-info">Roadnet Info Center™</li>
</ul>
</li>
<li class="line">_______________________</li>
<li ><div class="ajax-delivery">Delivery Intelligence™</div>
</li>
<li class="line">_______________________</li>
<li class="ultima-linha"><div class="ajax-tools">Tools Group™</div>
<ul class="sub-menu-drop sub-tools">
<li class="primeira-linha ajax-tools">Stock to Service Optimization™</li>
<li class="line">_______________________</li>
<li class="ultima-linha ajax-tools2">Production Planning™</li>
</ul>
</li>
</ul>
</li>
<li class="btn-menu" id="servicos">
<div class="btn-menu-img ajax-servicos">Serviços</div>
<ul class="menu-drop">
<li class="primeira-linha">Serviços Gerais</li>
<li class="line">_______________________</li>
<li class="ultima-linha">Proer</li>
</ul>
</li>
<li class="btn-menu" id="noticias">
<div class="btn-menu-img ajax-noticias">Notícias</div>
</li>
<li class="btn-menu" id="contato">
<div class="btn-menu-img ajax-contato">Contato</div>
</li>
</ul>
</div>Discussão (19)
Carregando comentários...