jQuery的幻燈片效果

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

<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淡出人們的視線，有點像滾動的窗口（水平或垂直）。我想我不能使用實際的滾動，因爲div的內容是通過ajax加載的，所以我無法在加載之前精確定位它。

任何想法？

TIA

格雷格

來源

2010-08-17 greg

格雷格，這聽起來像你正在尋找的東西像我這樣做這裏：

http://jsfiddle.net/2E5Qv/

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

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

來源

2010-08-17 17:52:15 Ender

謝謝，這正是我正在尋找的效果。我試過這種方式（滾動），但由於內容的ajax加載而不成功。我會再試一次，並提出一些更詳盡的代碼示例。 – greg 2010-08-17 21:04:57

你的意思是這樣的：

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

See the working demo here.

來源

2010-08-17 15:09:58 Sarfraz

哇，那太快了！它是這樣的，但我希望div_1被「推」，即滑動... – greg 2010-08-17 15:23:09

@greg：第一個div不會滑動，因爲它已經顯示。 – Sarfraz 2010-08-17 15:31:18

我採取了Sarfraz提供的內容，並根據我認爲您所尋找的內容稍微修改了它。爲了演示的目的，我也在點擊事件中激發了它。你可以在這裏找到工作示例：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'); 
});

來源

2010-08-17 18:17:11 TehOne

感謝您的回答:) – greg 2010-08-17 21:05:33

jQuery的幻燈片效果

回答

相關問題