jQuery, 함수 콜백 인스턴트, 대기 중

helou, 내 함수 콜백에 문제가 있습니다. Im tryng 좋은 효과를 얻으려면 웹 사이트에 내용을 숨기고 showint ... 하지만 숨기기 및 표시 기능은 서로를 기다리지 않고 다른 사람이 끝내기를 기다리는 대신 즉시 전화를합니다. 나는 잘못하고있다.jQuery, 함수 콜백 인스턴트, 대기 중

섹션 1 버튼을 클릭하면 왼쪽에 하위 메뉴가 표시되고 오른쪽에 내용이 표시됩니다. 내가 다른 버튼을 클릭하면, 현재 내용은 DROP해야하고 ... 이런 일이 새로운 내용이 나타나야합니다 .. 그러나 동시에 모든 것을, 내가 그들을

<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, 함수 콜백 인스턴트, 대기 중

답변

관련 문제