jQuery, functions Callback instant, Not waiting

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

  •  30-06-2022
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top