1

関数のコールバックに問題があります。Web サイトでコンテンツを非表示および表示する素晴らしい効果を得ようとしています...間違っている。

セクション 1 ボタンをクリックすると、左側にサブメニューが表示され、右側にコンテンツが表示されます。別のボタンをクリックすると、現在のコンテンツがドロップされ、新しいコンテンツが表示されるはずです...これは起こっています..しかし、すべてが同時に、それらをキューで動作させることができません

<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 に答える