Question

大家好，我的Function回调有问题。我试着在网站上获得隐藏和showint内容的好效果...... 但隐藏和显示功能并没有等待对方，他们立刻称自己而不是等待对方完成，我不知道我做错了什么。

单击第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>

Answer 1

我认为这是一个时间问题;你可以使用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/

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

1 个答案: