jQuery, functions Callback instant, Not waiting

StackOverflow https://stackoverflow.com/questions/19396828

  •  30-06-2022
  •  | 
  •  

Вопрос

helou, i have a problem with my Function callbacks. Im tryng to get a nice effect hiding and showint content on a web site... But the hide and show functions are not waiting for each other, they are calling themselves instantly instead of waiting for the other to finish, im not sure what im doing wrong.

When clicking on the Section 1 button, a Submenu appears on the left and content on the right. when i click another button, the current content should DROP and the new content must appear... this is happening.. but EVERYTHING at the SAME TIME, i cant get them to work in a Queue

<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>
Это было полезно?

Решение

I tihnk it's a timing issue; you can use a delay (or a setTimeout) and your animation will work.

Code:

$(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"
            });
        });
    });
});

Demo: http://jsfiddle.net/IrvinDominin/sG9CF/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top