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

Question

我有一些代碼可以在按下按鈕時交換面板，在顯示下一個之前隱藏屏幕上可能存在的其他代碼。 這有點混亂，因為必須采用某種方法來防止兩個面板同時出現。

http://jsfiddle.net/zDeveloper/X4sMF/

$(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();
        }
    });

})

演示： 小提琴