jQuery，函数回调即时，不等待

helou，我有我的函数回调问题。我试图得到一个很好的效果隐藏和showint网站上的内容... 但隐藏和显示功能并没有等待对方，他们自己立即调用自己而不是等待对方完成，我不知道什么即时通讯做错了。jQuery，函数回调即时，不等待

点击Section 1按钮时，子菜单出现在左侧，内容在右侧。当我点击另一个按钮，当前内容应该删除，新的内容必须出现......这是发生..但一切都在同一时间，我不能让他们在队列

<script> 

      $(document).ready(function() { 
       $("#sectionOneButton").click(function() { 
        $(".subSection").hide("drop"); 
        $(".subMenu").hide("drop", function() {       
         $("#divSubMenu_1").show("slide", { direction: "up" }, function() { 
          $("#divSubSection_1").show("slide", { direction: "left" }); 
         }); 
        });      
       }); 

       $("#sectionTwoButton").click(function() { 
        $(".subSection").hide("drop"); 
        $(".subMenu").hide("drop", function() {       
         $("#divSubMenu_2").show("slide", { direction: "up" }, function() { 
          $("#divSubSection_2").show("slide", { direction: "left" }); 
         }); 
        }); 
       });     
      }); 

     </script> 

    </head> 

    <body> 

     <div id="divWrapper" name="divWrapper" > 

      <div id="divBanner" name="divBanner" > 

      </div> 

      <div id="divNavigation" name="divNavigation"> 
       <button id="homeButton" class="buttonNavigation">Home</button> 
       <button id="sectionOneButton" class="buttonNavigation">Seccion 1</button> 
       <button id="sectionTwoButton" class="buttonNavigation">Seccion 2</button> 
       <button id="sectionThreeButton" class="buttonNavigation">Seccion 3</button> 
      </div> 

      <div id="divContent" name="divContent" > 

       <div id="divSubMenu_1" class="subMenu"> 
        <button class="buttonSubMenu">SubContenido 1</button> 
        <button class="buttonSubMenu">SubContenido 2</button> 
        <button class="buttonSubMenu">SubContenido 3</button> 
       </div> 

       <div id="divSubMenu_2" class="subMenu"> 
        <button class="buttonSubMenu">SubContenido 4</button> 
        <button class="buttonSubMenu">SubContenido 5</button> 
        <button class="buttonSubMenu">SubContenido 6</button> 
       </div> 

       <div id="divSubSection_1" class="subSection"> 
        Sub Seccion 1 
        <input type="text" name="date" id="date" />      
       </div> 

       <div id="divSubSection_2" class="subSection"> 
        Sub Seccion 2 
        <input type="text" name="date" id="date" />      
       </div> 

      </div> 

      <div id="divFooter" name="divFooter" > 

      </div> 

     </div> 

    </body> 
</html>

来源

2013-10-16 Gabriel Matusevich

u能为您的代码的jsfiddle？ – iJade

我tihnk工作这是一个计时问题;您可以使用delay（或setTimeout），并且您的动画将起作用。

代码：

$(document).ready(function() { 
    $("#sectionOneButton").click(function() { 
     $(".subSection, .subMenu").hide("drop").delay(500); 
     $("#divSubMenu_1").show("slide", { 
      direction: "up" 
     }, function() { 
      $("#divSubSection_1").show("slide", { 
       direction: "left" 
      }); 
     }); 
    }); 

    $("#sectionTwoButton").click(function() { 
     $(".subSection, .subMenu").hide("drop").delay(500); 
     $("#divSubMenu_2").show("slide", { 
      direction: "up" 
     }, function() { 
      $("#divSubSection_2").show("slide", { 
       direction: "left" 
      }); 
     }); 
    }); 
});

演示：http://jsfiddle.net/IrvinDominin/sG9CF/

来源

2013-10-16 11:17:02

jQuery，函数回调即时，不等待

回答

相关问题