Problema com stop();

FelipeSAMA · Dezembro 14, 2011

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>

William Bruno · Dezembro 14, 2011

opa.

cara... uma das primeiras coisas a fazer é otimizar o script.

Pois qnto mais "pesado" do ponto de vista de rotinas e processamento, mais chances de travar ou ficar lenta a animação você terá.

$('.btn-menu').hover(function() {
               var $this = $( this );

               $this.children('.menu-drop').stop(true, true).slideDown(200);
               $this.children('.btn-menu-img').css({
                       'background': 'url(img/btn-menu-hover.png) no-repeat', 
                       'color': '#fff', 
                       'font-weight': 'bold'
               });
       }, function() {
               var $this = $( this );

               $this.children('.menu-drop').stop(false, true).slideUp(200);
               $this.children('.btn-menu-img').css({
                       'background': 'url(img/btn-menu.png) no-repeat', 
                       'color': '#414042', 
                       'font-weight': 'normal'
               });
       });

entendeu ?

otimizei os seus seletores, em vez de buscar o mesmo elemento 3 vezes, busco uma só, e aplico na mesma chamada do .css()

FelipeSAMA · Dezembro 14, 2011

Pode crer, eu não havia pensado dessa forma!

Acabei de tentar, mas o problema continua (O menu continua funcionando bem, mas da pau logo depis de clicar em algum botao). Eu uso ajax nas classes para carregar um conteudo dentro de divs no centro. Logo depois de dar o load, a animação não funciona mais, o drop down só muda pra display block.

William Bruno · Dezembro 14, 2011

O menu também é trazido no ajax?

como é a estrutura da página ? e qual div recebe o retorno ?

FelipeSAMA · Dezembro 14, 2011

Na verdade o menu não é trazido por ajax e sim o conteudo. A estrutura é complexa, tem footer e header fixos, no meio deles tem 5 containers.. os 2 primeiros apenas mudam de display, os 3 ultimos carregam conteudovo postar aqui.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e-nov@tions</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 <script  type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
 <link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 <script type="text/javascript" src="js/inicio.js" ></script>
 <script type="text/javascript" src="js/banner.js" ></script>
 <script type="text/javascript" src="js/nav.js" ></script>
 <script type="text/javascript" src="js/browserDetect.js" ></script>
 <script type="text/javascript" src="js/jquery-easing.js" ></script>
 <link href="css/style-extended.css" type="text/css" rel="stylesheet" media="screen" />


</head>
<body>
<div id="body">
<div id="header">
 <div class="ct-horizontal">
   <div class="mg top1">
   </div>
   <div id="middle-header">
     <div id="logo" class="ajax-home">
     </div>

     <div id="tools">
       <div id="map-site">
       Mapa do Site 
       </div>
       <div id="assistencia">
       Solicite Assistência Remota
       </div>
     </div>

     <div class="clear"></div>
     <div class="mg top2">
     </div>
   </div>

 </div>

 <div class="clear"></div>
 <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>
</div>





<div id="dynamic-0"> <!-- DYNAMIC-0 reservado para BANNER PRINCIPAL e INDEX -->
   <div id="banner"> <!-- INICIO DO BANNER PRINCIPAL-->

     <?php
if (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE")) {
 echo '

 <div id="container">
   <div id="iframe">
     <ul>
     <li class="iframe-img img1">
       <img src="img/otimize.jpg" alt="otimize sua logistica" height="341" width="550" />
     </li>
     <li class="iframe-img img2">
       <img src="img/gerencie.jpg" alt="otimize sua logistica" height="341" width="550" />
     </li>
     <li class="iframe-img img3">
       <img src="img/reduzir.jpg" alt="otimize sua logistica" height="341" width="550" />
     </li>
     <li class="iframe-img img4">
       <img src="img/proer.jpg" alt="otimize sua logistica" height="341" width="550" />
     </li>

     </ul>
   </div>
   <div id="thumbnails">
     <ul>
     <li class="thumbnail-cont thumb1">
       <div>
       <img class="first-img" src="img/lofthumbs/caminhao.png" alt="otimize sua logistica" />
       <img class="second-img" src="img/lofthumbs/caminhao-active.png" alt="otimize sua logistica" />
       <h3>Otimize Sua Logística</h3>
       <p>Soluções de Otimização e gestão da sua logística e distribução.</p>
       </div>
     </li>
     <li class="thumbnail-cont thumb2">
       <div>  
       <img class="first-img" src="img/lofthumbs/gestao.png" alt="gerencie sua equipe de vendas"/>
       <img class="second-img" src="img/lofthumbs/gestao-active.png" alt="gerencie sua equipe de vendas"/>
       <h3>Gerencie Equipe de Vendas / Serviços</h3>
       <p>Soluções de otimização do planejamento e gestão da execução em tempo real para a equipe de vendas e serviços.</p>
       </div>
     </li>
     <li class="thumbnail-cont thumb3">
        <div>
       <img class="first-img" src="img/lofthumbs/prancheta.png" alt="reduzir custos e estoque armazenado"/>
       <img class="second-img" src="img/lofthumbs/prancheta-active.png" alt="reduzir custos e estoque armazenado"/>
       <h3>Reduzir Custos e Estoque Armazenada</h3>
       <p>Soluções para planejar sua demanda, otimizar seus estoques e planejamento da produção.</p>
       </div>
     </li>
     <li class="thumbnail-cont thumb4">
       <div>
       <img class="first-img" src="img/lofthumbs/proer.png" alt="proer"/>
       <img class="second-img" src="img/lofthumbs/proer-active.png" alt="proer"/>
       <h3>PROER / CROP</h3>
       <p>Serviços de avaliação de processos e sistemas em sua operação de distribuição.</p>
       </div>
     </li>

     </ul>
   </div>

 </div>

 '; 
} else {
 echo '

 <div id="container">

   <div id="slidecontent" class="lof-slidecontent">
     <div class="preload"></div>

     <div class="lof-main-outer">
       <ul class="lof-main-wapper">
         <li>
           <img src="img/otimize.jpg"  height="341" width="550" alt="otimize sua logística"/>       
           <div class="lof-main-item-desc">
             <h3></h3>
             <p></p>
             <div class="saiba"></div>
           </div>
         </li> 
         <li>
           <img src="img/gerencie.jpg"  height="341" width="550" alt="gerencie sua equipe de vendas"/>
           <div class="lof-main-item-desc">
             <h3></h3>
             <p></p>
             <div class="saiba"></div>
           </div>
         </li> 
         <li>
           <img src="img/reduzir.jpg" height="341" width="550" alt="reduzir custos e estoque armazenado" />
           <div class="lof-main-item-desc">
             <h3></h3>
             <p></p>
             <div class="saiba"></div>
            </div>
         </li> 
         <li>
           <img src="img/proer.jpg" height="341" width="550" alt="proer" />
           <div class="lof-main-item-desc proer-crop">
             <h3></h3>
             <p></p>
             <div class="saiba"></div>
           </div>
         </li> 

       </ul>    
     </div>

     <div class="lof-navigator-outer">
       <ul class="lof-navigator">
       <li>
       <div class="mini">
         <img class="thumb caminhao" src="img/nothing.png" alt="otimize sua logistica" />
         <h3>Otimize Sua Logística</h3>
         <p>Soluções de Otimização e gestão da sua logística e distribução.</p>
       </div>
       </li>
        <li>
       <div class="mini">
         <img class="thumb gestao" src="img/nothing.png" alt="gerencie sua equipe de vendas"/>
         <h3>Gerencie Equipe de Vendas / Serviços</h3>
         <p>Soluções de otimização do planejamento e gestão da execução em tempo real para a equipe de vendas e serviços.</p>
       </div>  
       </li>

       <li>
       <div class="mini">
          <img class="thumb prancheta" src="img/nothing.png" alt="reduzir custos e estoque armazenado"/>
         <h3>Reduzir Custos e Estoque Armazenada</h3>
         <p>Soluções para planejar sua demanda, otimizar seus estoques e planejamento da produção.</p>
       </div>   
       </li>

        <li>
       <div class="mini">
         <img class="thumb proer" src="img/nothing.png" alt="proer"/>
         <h3>PROER / CROP</h3>
         <p>Serviços de avaliação de processos e sistemas em sua operação de distribuição.</p>
       </div>
       </li>  

       </ul>
     </div>
   </div> 
 </div>
';
}
?>

   </div> <!-- FIM DO BANNER PRINCIPAL -->
</div>




<div id="dynamic-01">

     <div id="feed">
       <div class="ct-horizontal ct-feed">
         <div id="feed-noticias">
           <ul>
           <li><span class="titulo">Últimas Atualizações .:</span></li>
           <li class="linha"><span class="linha">_____________________________</span></li>
           </ul>
           <p>
           <span class="data">( 7/10/2011  ) - </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud eercitation 
           ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </p>
         </div>
         <div id="live-demo">
         </div>
       </div>
     </div>

     <div id="quadros">
       <div id="quadros-left">
       <ul>
       <li class="titulo-feed">Roadnet</li>
       <li class="segundo-feed">Transportation Suite .:</li>
       <li class="linha-feed"></li>
       </ul>
       Conheça as soluções de otimização logística da Roadnet Technologies que tem auxiliado empresas do mundo todo a reduzirem seus custos e aprimorarem sua eficiência logística.
         <div class="img quadro-left">
         <div class="mais"></div>
         </div>
       </div>

       <div id="quadros-center">
       <div class="grey">
         <ul id="titulo-verde">
         <li class="segundo-feed">Avalie Seu Nível de</li>
         <li class="titulo-feed">Eficiência Logística .:</li>
         </ul>
       </div>
       <div id="quadros-center-text">
       Conheça o PROER, nosso programa de avaliação  de processos e melhores práticas na operação de distribuição de sua empresa.
       </div>
         <div class="img quadro-center">
         <div class="mais"></div>
         </div>
       </div>

       <div id="quadros-right">
       <ul>
       <li class="segundo-feed">Conheça Nossa</li>
       <li class="titulo-feed">Logística Verde .:</li>
       <li class="linha-feed"></li>
       </ul>
       O Roadnet Transportation Suite auxilia sua empresa a otimizar seus custos logísticos e ao mesmo tempo tornar sua logística mais verde, reduzindo a omição de CO2 em sua frota e contribuindo com a melhoria do meio ambiente.
         <div class="img quadro-right">
           <div class="mais"></div>
         </div>
       </div>
     </div>

</div>
<!-- FIM DO DYNAMIC-01 reservado para FEED e QUADROS -->




<div id="dynamic-banner">
 <!-- DYNAMIC-BANNER reservado para o BANNER pequeno -->
 </div>
<div id="cont">
 <div id="dynamic-1">
 <!-- DYNAMIC-1 reservado para o nav local -->
 </div>
 <div id="dynamic-2"> 
 <!-- DYNAMIC-2 reservado para o center -->
 </div>
 <div id="dynamic-3">
  <!-- DYNAMIC-3 reservado para direita -->
 </div>
</div>




   <div class="clear"></div>
   <div id="footer">
   <div id="footer-border"></div>
   <div class="ct-footer">
     <div id="ul-menu-footer">

       <div class="li-footer ajax-home">Home</div>
       <div class="barra">|</div>
       <div class="li-footer ajax-empresa">Empresa</div>
       <div class="barra">|</div>
       <div class="li-footer ajax-solucoes">Soluções</div>
       <div class="barra">|</div>
       <div class="li-footer ajax-produtos">Produtos</div>
       <div class="barra">|</div>
       <div class="li-footer ajax-servicos">Serviços</div>
       <div class="barra">|</div>
       <div class="li-footer ajax-noticias">Noticias</div>
       <div class="barra">|</div>
       <div class="li-footer ajax-trabalhe">Trabalhe Conosco</div>
       <div class="barra">|</div>
       <div class="li-footer" id="fancy-map">Mapa do Site</div>
       <div class="barra">|</div>
       <div class="li-footer ajax-contato">Contato</div>

     </div>
     <div id="copyright">
     <p>Copyright © 2004 - E-nov@tions - Todos os direitos reservados.</p>
     </div>
   </div>
   </div>
</div>


</body>
</html>

e quanto ao ajax, é o seguinte

('.ajax-home').click(function() {
	$('#dynamic-0').css('display', 'block');
	$('#dynamic-01').css('display', 'block');
	$('#cont').css('display', 'none');
	$('#dynamic-banner').css('display', 'none');
});

$('.ajax-empresa').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-empresa.php');
	$('#dynamic-1').load('php/left-empresa.php');
	$('#dynamic-2').load('php/center-empresa.php');
	$('#dynamic-3').load('php/right-empresa.php');
});

$('.ajax-solucoes').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-solucoes.php');
	$('#dynamic-1').load('php/left-solucoes.php');
	$('#dynamic-2').load('php/none.php');
	$('#dynamic-3').load('php/none.php');
});

$('.ajax-produtos').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-produtos.php');
	$('#dynamic-3').load('php/right-produtos.php');
});

$('.ajax-roadnet').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-roadnet.php');
	$('#dynamic-3').load('php/right-roadnet.php');
});

$('.ajax-territory').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-territory.php');
	$('#dynamic-3').load('php/right-territory.php');
});

$('.ajax-fleet').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-fleet.php');
	$('#dynamic-3').load('php/right-fleet.php');
});

$('.ajax-mobile').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-mobile.php');
	$('#dynamic-3').load('php/right-mobile.php');
});

$('.ajax-info').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-info.php');
	$('#dynamic-3').load('php/right-info.php');
});

$('.ajax-delivery').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-delivery.php');
	$('#dynamic-3').load('php/right-delivery.php');
});

$('.ajax-tools').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-tools.php');
	$('#dynamic-3').load('php/right-tools.php');
});

$('.ajax-tools2').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-produtos.php');
	$('#dynamic-1').load('php/left-produtos.php');
	$('#dynamic-2').load('php/center-tools2.php');
	$('#dynamic-3').load('php/right-tools2.php');
});

$('.ajax-servicos').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-servicos.php');
	$('#dynamic-1').load('php/left-servicos.php');
	$('#dynamic-2').load('php/none.php');
	$('#dynamic-3').load('php/none.php');
});

$('.ajax-noticias').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-noticias.php');
	$('#dynamic-1').load('php/none.php');
	$('#dynamic-2').load('php/none.php');
	$('#dynamic-3').load('php/none.php');
});

$('.ajax-contato').click(function() {
	$('#dynamic-0').css('display','none');
	$('#dynamic-01').css('display','none');
	$('#cont').css('display', 'block');
	$('#dynamic-banner').css('display', 'block');
	$('#dynamic-banner').load('php/banner-contato.php');
	$('#dynamic-1').load('php/left-contato.php');
	$('#dynamic-2').load('php/center-contact.php');
	$('#dynamic-3').load('php/none.php');
});

Se quiser visualizar para entender, visite www.felipeandres.com.br/e-novations

William Bruno · Dezembro 14, 2011

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.. =/

a animação não funciona mais, o drop down só muda pra display block.

isso é pq você mandou que fosse assim!. Veja:

        $('.ajax-empresa').click(function() {
               $('#dynamic-0').css('display','none');
               $('#dynamic-01').css('display','none');
               $('#cont').css('display', 'block');
               $('#dynamic-banner').css('display', 'block');

você não fez nenhuma animação ai. Então como você queria que fosse animado ?

A animação ocorre em outro evento, em um elemento que você não chama no click

$(this).children('.menu-drop').slideDown(200);

Ao clicar no .ajax-empresa, você quer animar o .menu-drop dele ?

ou o efeito que você busca, é outra coisa ?

FelipeSAMA · Dezembro 14, 2011

o dynamic-0 serve pra carregar o banner principal, se o browser for internet eplorer, carrega-se um banner alternativo, se fo qualquer outro browser carrega o ormal. o dynamic-02 vem o conteudo central da pagina inicial, e os outros 3 dynamics careram conteudo das otras paginas.

Vamos facilitar a sua vida m poco:

para entender o ajax, basta entender os 2 primeiros que de resto é tudo igual

('.ajax-home').click(function() {
               $('#dynamic-0').css('display', 'block');
               $('#dynamic-01').css('display', 'block');
               $('#cont').css('display', 'none');
               $('#dynamic-banner').css('display', 'none');
       });

       $('.ajax-empresa').click(function() {
               $('#dynamic-0').css('display','none');
               $('#dynamic-01').css('display','none');
               $('#cont').css('display', 'block');
               $('#dynamic-banner').css('display', 'block');
               $('#dynamic-banner').load('php/banner-empresa.php');
               $('#dynamic-1').load('php/left-empresa.php');
               $('#dynamic-2').load('php/center-empresa.php');
               $('#dynamic-3').load('php/right-empresa.php');
       });

Ao clicar em algum dos botoes do menu ou que tenham a classe ajax-'sessao', o display do dynamic-0 e dynamic-01 fikam none(sao os 2 divs q tem conteudo da index) e nos divs dynamic-1, dynamic-2 e dynamic-3 arregam o conteudo correspondente esa pagina..

Ao clicar na classe ajax-home tudo que foi carregado acima desaparece e volta o conteudo da pagina ninical

William Bruno · Dezembro 14, 2011

e a animação ? deveria supostamente ocorrer onde ?

com qual elemento ?

FelipeSAMA · Dezembro 14, 2011

putz é verdade... você abriu meus olhos... eu posso tentar unir os 2 em uma unica classe.

é o seguinte: quando ocorre o evento hover por cima da classe btn-menu, ele anima.. Eu tbm coloquei a classe ajax-'seções' no btn-menu-img para carregar o conteudo correspondente da seção

<li class="btn-menu" id="produtos">
<div class="btn-menu-img"><a class="ajax-produtos">Produtos</a></div>

A animação tem que ocorrer com a class btn-menu, e os seus drop downs, só que ao mesmo tempo a classe ajax está dntro dela, pois funciona como 'hyperlinks', entendeu?

William Bruno · Dezembro 14, 2011

A animação tem que ocorrer com a class btn-menu, e os seus drop downs,

ok, e isso está correto ne?!

Mesmo depois que clico em algum item, e carrega o conteúdo, a animação do dropdown continua funcionando.

só que ao mesmo tempo a classe ajax está dntro dela, pois funciona como 'hyperlinks', entendeu?

não entendi.

Tipo.. "e daí" que a classe ajax está dentro ? a animação ocorre assim q eu coloco o mouse sobre o .btn-menu, e continua acontecendo mesmo depois de clicar para carregar algum conteúdo.

Onde está o problema ?

FelipeSAMA · Dezembro 14, 2011

Putz cara... Aqui não acontece issso. depois que clico em algum dos botoes, o ajax carrega mas de resto tudo para de fncionar... estranho oO

Eu pensava que podia ser o Firefox pois tenho uma versão beta, mas conferi em todos os browsers e não é isso. Testei em outro pc aqui, e a colega que senta ao lado nem reparou, talvz você não tenha tbm.

Abre deovo a página, passe por cima o mouse em cima do botão produtos, abra os sub menus dentro dele, repare q tem uma animação slideUp e down, demora 200 mili segundos.

Depois clique em algum deles e tire o mouse, repare q a animação desapareceu, entretanto o menu só muda de display

William Bruno · Dezembro 14, 2011

Ok, então vamos reanalizar os dados.

Antes do .stop() você não tinha esse problema, certo ?

teste dessa forma:

$('.menu-drop').stop(true, true);
$this.children('.menu-drop')slideDown(200);

FelipeSAMA · Dezembro 14, 2011

Ainda bem que você ntendeu hahah.. já estava começando a me desesperar

Exato, o problema só acontece depois que inseri o stop.

só uma duvida...

$('.menu-drop').stop(true, true);
$this.children('.menu-drop')slideDown(200);

tem q ser true, true tanto em cima quanto na parte de baixo do hover?

William Bruno · Dezembro 14, 2011

na verdade, eu não vejo muito sentido usar o .stop() "embaixo" (no mouseout)

eu deixaria apenas em cima, apenas no mouseover.

Realmente eu não tinha percebido.. o efeito tá bem leve, e pelo código não deveria ter dado "esse erro".

Por isso demorei para "entender".

FelipeSAMA · Dezembro 14, 2011

Acabei de tentar, e travou tudo, da uma olhada no site pra ver como ficou:

$('.btn-menu').hover(function() {
               var $this = $( this );

               $this.children('.menu-drop').stop(true, true);
	$this.children('.menu-drop')slideDown(200);
               $this.children('.btn-menu-img').css({
                       'background': 'url(img/btn-menu-hover.png) no-repeat', 
                       'color': '#fff', 
                       'font-weight': 'bold'
               });
       }, function() {
               var $this = $( this );

               $this.children('.menu-drop')slideUp(200);
               $this.children('.btn-menu-img').css({
                       'background': 'url(img/btn-menu.png) no-repeat', 
                       'color': '#414042', 
                       'font-weight': 'normal'
               });
       });

www.felipeandres.com.br/e-novations

William Bruno · Dezembro 14, 2011

ai foi erro de sintaxe, faltou um ponto ali:

$this.children('.menu-drop')slideDown(200);

a aplicação que você fez do .stop() está conceitualmente diferente da minha.. olhe com mais atenção a minha sugestão.

cara, sempre, sempre q tiver desenvolvendo javascript, aperte Ctrl+Shift+J no Firefox(ou Chrome)

leitura:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

eu peguei o erro de q estava faltando o ponto assim.. vendo no console.

FelipeSAMA · Dezembro 14, 2011

Esse erro do ponto eu havia copiado do seu la de cima heheheh... nao notie tbm

Ja corrigi e nao deu certo.... O problema deve ser no jeito que eu uso o stop, pois continnua igual ao de antes, a animaçao desaparece depois do click... ok vo ler

FelipeSAMA · Dezembro 14, 2011

De volta!

Usando o CTOL+SHIFT+J aparece os seguontes erros:

Alerta: Propriedade desconhecida “-moz-border-bottom-left-radius”. Declaração ignorada.

Arquivo-fonte: http://felipeandres.com.br/e-novations/css/style-extended.css

Linha: 260

................

Alerta: Propriedade desconhecida “-moz-border-bottom-right-radius”. Declaração ignorada.

Arquivo-fonte: http://felipeandres.com.br/e-novations/css/style-extended.css

Linha: 545

Aparece uns 10 iguais a esse, mas o que tem de errado com issso? a propriedade -moz-zborder é reconhecida no browser Mozila

Fora isso não há nada de errado aparentemente oO

William Bruno · Dezembro 14, 2011

Aparece uns 10 iguais a esse, mas o que tem de errado com issso? a propriedade -moz-zborder é reconhecida no browser Mozila

sim, mas as ultimas versões do Mozilla, tb já reconhecem o border-radius, sem o prefixo.

então você pode tirar o prefixo -moz

cara.. fiquei sem idéias também. Não ta fazendo sentindo para mim esse erro.

para debugar daqui em diante, você precisa isolar o script.

Eliminar a complexidade, e chegar no minimo q causa o erro.

Tipo... isole a animação e a chamada ajax. Talvez alguma delas é que esteja interferindo. Entendeu ?

FelipeSAMA · Dezembro 14, 2011

Opa.. É eu sei que as novas verões aceitam, mas e as antigas?

É impossivel garantir que todos os usuários tenham a versão atualizada..

Mas enfim, eu consegui resolver 90% do problema. Só mudei o stop pro final

$('.btn-menu').hover(function() {
               var $this = $( this );

			$this.children('.menu-drop').slideDown(200);
               $this.children('.btn-menu-img').css({
                       'background': 'url(img/btn-menu-hover.png) no-repeat', 
                       'color': '#fff', 
                       'font-weight': 'bold'
               });
       }, function() {
               var $this = $( this );

			$this.children('.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', 
                       'color': '#414042', 
                       'font-weight': 'normal'
               });
       });

$('.menu-drop').find('li').hover(function() {
	$(this).children('.sub-menu-drop').slideDown(70);
	$(this).children('.sub-menu-drop').css('display', 'block');
	$(this).children('.sub-menu-drop').css('cursor', 'pointer');
}, function() {
	$(this).children('.sub-menu-drop').slideUp(70);
	$(this).children('.menu-drop').stop(true, true);
	$(this).children('.sub-menu-drop').css('cursor', 'default');
});

Dessa forma, depois do click a animação SlideDown continua funcionando para o ul.menu-drop, apenas a SlideUp que corta. Mas acho q nao fika feio, porque ambos SlieUp e SlideDown funcionam para o ul.sub-men-drop

Confere e veja se fika bunito felipeandres.com.br/e-novations/

ja fiquei feliz desse jeito mas ainda vo descobrir porque o slide Up do menu-drop nao funciona

Arquivado

Problema com stop();

Recommended Posts

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeSAMA 1