Question

我有一些代码在按下按钮时交换面板，在显示下一个按钮之前隐藏屏幕上可能存在的任何其他代码。它有点乱，因为它必须通过这种方式来防止两个面板同时出现。

$(document).ready(function () {
    $("#pref-sliders-swap").appendTo($("#sliderbox"));
    $("#sliderbox").hide();
    $("#characters").hide();
    $("#currentdesires").hide();
    $("#important").hide();

    $("#sliderbutton").click(function () {
        $("#welcome").fadeOut(function () {
            $("#characters").fadeOut(function () {
                $("#currentdesires").fadeOut(function () {
                    $("#important").fadeOut(function () {
                        $("#sliderbox").fadeIn();
                    });
                });
            });
        });
    });

    $("#homebutton").click(function () {
        $("#sliderbox").fadeOut(function () {
            $("#characters").fadeOut(function () {    
                $("#currentdesires").fadeOut(function () {
                    $("#important").fadeOut(function () {
                        $("#welcome").fadeIn();
                    });
                });
            });
        });
    });

    $("#charactersbutton").click(function () {
        $("#sliderbox").fadeOut(function () {
            $("#welcome").fadeOut(function () {
                $("#currentdesires").fadeOut(function () {
                    $("#important").fadeOut(function () {
                        $("#characters").fadeIn();
                    });
                });
            });
        });
    });    

    $("#desirebutton").click(function () {
        $("#sliderbox").fadeOut(function () {
            $("#welcome").fadeOut(function () {
                $("#characters").fadeOut(function () {
                    $("#important").fadeOut(function () {
                        $("#currentdesires").fadeIn();
                    });
                });
            });
        });
    });

    $("#impbutton").click(function () {
        $("#sliderbox").fadeOut(function () {
            $("#welcome").fadeOut(function () {
                $("#characters").fadeOut(function () {
                    $("#currentdesires").fadeOut(function () {
                        $("#important").fadeIn();
                    });
                });
            });
        });
    });

});

我放在那里的代码正是我想要的，平滑地淡入和淡出面板（至少在firefox中）虽然它有点麻烦。是否有更好的方法来实现同样的效果？

Answer 1

尝试

<!--use the class trigger to group the trigger elements, then use data-target to specify the id of the target element to be displayed-->
<div id="sliderbutton" data-target="#sliderbox" class="trigger">sliderbutton</div>
<div id="homebutton" data-target="#welcome" class="trigger">homebutton</div>
<div id="charactersbutton" data-target="#characters" class="trigger">charactersbutton</div>
<div id="desirebutton" data-target="#currentdesires" class="trigger">desirebutton</div>
<div id="impbutton" data-target="#important" class="trigger">impbutton</div>

<!--Use the class content to group all the content elements-->
<div id="sliderbox" class="content">sliderbox</div>
<div id="characters" class="content">characters</div>
<div id="currentdesires" class="content">currentdesires</div>
<div id="important" class="content">important</div>
<div id="welcome" class="content">welcome</div>

然后

jQuery(function () {
    $("#pref-sliders-swap").appendTo("#sliderbox");
    $(".content").not('#welcome').hide();

    var $contents = $('.content');
    $contents.not('#welcome').hide();

    $(".trigger").click(function () {
        var $visible = $contents.stop(true, true).filter(':visible'),
            $target = $($(this).data('target')).stop(true, true);
        if ($visible.length) {
            $visible.fadeOut(function () {
                $target.fadeIn();
            });
        } else {
            $target.fadeIn();
        }
    });

})

演示：Fiddle

什么是在javascript中切换面板的更好方法？

1 个答案: