jquery-animate - jQuery 切换动画元素的可见性

Question

我有一个使用 jQuery 导航按钮的页面，当单击每个按钮时，该按钮应将内容滑入视图。但是，当单击另一个按钮时，我需要在新内容滑入视图之前将当前查看的内容滑出视图。

这是我到目前为止所做的：

$("#rules-btn").click(function () {
    var effect = 'slide';
    var options = { direction: 'left' };
    var duration = 700;
    $('#rules-pane').toggle(effect, options, duration);
});

这是我的jsfiddle，它显示了它现在的行为方式。谁能告诉我单击另一个按钮时如何隐藏当前查看的内容？谢谢。

顺便说一句，我对 jQuery 很陌生......

Answer 1

演示：http: //jsfiddle.net/e6kaV/6/

HTML：

<div id="rules" class="pane-launcher"></div>
<div id="rules-pane" class="pane"></div>
<div id="scenarios" class="pane-launcher"></div>
<div id="scenarios-pane" class="pane"></div>

JS：

$(".pane-launcher").click(function () {
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'left' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});

CSS：

.pane-launcher{
    position:absolute;
    top: 0;
    width:20px;
    height:20px;
    background-color:#000;
    display:block;
}
#rules {
    left:0px;
}
#scenarios {
    left:40px;
}
.pane{
    position:absolute;    
    left: 0;
    height:50px;
    display:none;
    opacity:0.5;
}
#rules-pane {
    top:50px;
    width:200px;
    background-color:#999;
}

#scenarios-pane {
    top:60px;
    width:170px;
    background-color:#F00;
}

请记住：与其处理大量 id，不如使用类来添加样式和事件处理程序。