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，最好是使用類來添加樣式和事件處理程序。