1

helou，我的函数回调有问题。我试图在网站上获得一个很好的隐藏和显示内容的效果......但是隐藏和显示功能不会相互等待，它们会立即调用自己而不是等待对方完成，我不确定我是什么做错了。

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

1 回答 1

2

我认为这是时间问题。您可以使用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-16T11:17:02.690 回答