jQuery的幻燈片效果

Question

我想使用jQuery創建幻燈片效果。 我有幾個div：

<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>

這個想法是div_2會在滑動div_1並將其“推”到視線之外時出現，就像滾動窗口（水平或垂直）一樣。 我想我不能使用實際的滾動，因為divs的內容是通過ajax加載的，所以我無法在加載之前精確定位它。

任何想法？

TIA

格雷格

Answer 1

您的意思是這樣的：

$('#div_2').slideDown('slow', function(){
  $('#div_1').slideUp('slow');
});

在這里查看工作演示。

Answer 2

格雷格，聽起來您正在尋找我在這里所做的事情：

http://jsfiddle.net/2E5Qv/

如果是這樣，您想要做的是將所有這些<div>包含在父級中，然后在滑動它們時，請為每個div的頂部設置正確數量的像素動畫。 我上面提供的解決方案將每個<div>或多或少設置為20px的固定高度（通過line-height ）。

父<div>充當一種窗口，僅顯示當前內容。

Answer 3

我接受了Sarfraz提供的內容，並根據我認為的要求對其進行了稍微的修改。 為了演示起見，我還使其在click事件上觸發。 您可以在這里找到工作示例： http : //jsbin.com/emowu3/3

$('#div_1').click(function(){
    $('#div_1').slideUp('slow');
    $('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
    $('#div_2').slideUp('slow');
    $('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
    $('#div_3').slideUp('slow');
    $('#div_1').slideDown('slow');
});