後，其他切換DOM元素一個使用jQuery

我有以下代碼：後，其他切換DOM元素一個使用jQuery

<div id="quotes"> 
    <p>"Quote 1."</p> 
    <p>"Quote2!"</p> 
    <p>"Quote3"</p> 
    <p>"Etc"</p> 
</div>

有沒有一種簡單的方法來循環每一個報價，從而顯示出報價1，然後淡出顯示quote2！等我還是需要使用插件？

來源

2012-05-18 John

我編輯了一下演示，希望你喜歡它。 – gdoron

很顯然，如果沒有插件，解決方案非常簡單，gdoron's很好，但如果這是一個需求，不會重複。我爲你添加了一個插件，可能更簡單一些，並且可以設置一些選項。我因爲它的簡單性而投票贊成gdoron's。 – lucuma

$('#quotes p').each(function(index){ 
    $(this).delay(index * 1000).fadeIn().fadeOut(); 
});

或者是這樣的：

$('#quotes p').hide().each(function(index){ 
    $(this).delay(index * 1600).fadeIn().delay(750).fadeOut(); 
});

Live DEMO

來源

2012-05-18 09:03:19 gdoron

這就是它，謝謝 – John

保持Q2，Q3等爲「隱藏」的知名度。
延遲您想要顯示第一個報價多長時間，然後在回調中，您可以切換第一個和第二個報價的可見性。在此回調中重複該流程的延遲和回調。

來源

2012-05-18 09:05:53 geekoraul

$('#quotes').find('p').hide(); 

$('#quotes').find('p').each(function(i){ 
     $(this).prev().fadeOut('slow'); 
     $(this).fadeIn('slow'); 
    });

來源

2012-05-18 09:05:57 Thulasiram

這不會工作，不只是因爲你沒有終止選擇器字符串。 [你的代碼DEMO]（http://jsfiddle.net/NThcn/4/） – gdoron

另一種選擇是使用插件。 jQuery的週期插件是很大的和超簡單的設置：

它成爲一個一個襯裏：$('#quotes').cycle()

演示：http://jsfiddle.net/lucuma/HsWrC/1/

Cycle插件：http://jquery.malsup.com/cycle/

參考（之間的控制時間，動畫類型，等）：http://jquery.malsup.com/cycle/options.html

來源

2012-05-18 13:06:22 lucuma

後，其他切換DOM元素一個使用jQuery

回答

相關問題