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，函數回調即時，不等待

回答

相關問題