一個div內的衰落與元素週期

Question

我有一個div像這樣：

<div id="fade"> 
<p> A </p> 
<p> B </p> 
<p> C </p> 
<p> D </p> 
<p> E </p> 
</div> 

我想淡入該div每一個字母，而週期只重複一次。

這是它應該從'A'開始，直到'E'然後停止。

是否有任何jQuery的庫？

編輯： 感謝您的回覆。我想我把這個問題弄錯了。 我想div（淡入淡出）顯示'A'然後淡出，並在同一個地方'B'淡入，等等。這應該只重複一次。

謝謝。

Answer 1

你可以簡單地使用這一功能擴展jQuery的：

$.fadeInNext = function(next){ 
    next.fadeIn(function(){ 
     $.fadeInNext($(this).next()); 
    }); 
} 
$.fn.fadeInEach = function(){ 
    this.eq(0).fadeIn(function(){ 
     $.fadeInNext($(this).next()); 
    }); 
}; 
$('#fade p').hide().fadeInEach();​ 

這應該工作。Example

---

更新：

淡出新信透水一個沒落之後：

$.fadeInNext = function(next) { 
    next.fadeIn(function() { 
     $(this).fadeOut(function(){ 
      $.fadeInNext($(this).next()); 
     }); 
    }); 
} 
$.fn.fadeInEach = function() { 
    this.eq(0).fadeIn(function() { 
     $(this).fadeOut(function() { 
      $.fadeInNext($(this).next()); 
     }); 
    }); 
}; 
$('#fade p').hide().fadeInEach();​ 

Example

---

淡入新的信而以前是還是淡出：

CSS：

#fade { 
    position: relative; 
} 
#fade p { 
    position: absolute; 
}​ 

的JavaScript：

$.fadeInNext = function(next) { 
    next.fadeIn(function() { 
     $(this).fadeOut(); 
     $.fadeInNext($(this).next()); 
    }); 
} 
$.fn.fadeInEach = function() { 
    this.eq(0).fadeIn(function() { 
     $(this).fadeOut(); 
     $.fadeInNext($(this).next()); 
    }); 
}; 
$('#fade p').hide().fadeInEach();​ 

Example

Answer 2

檢查這個插件了：

• http://www.malsup.com/jquery/cycle/int2.html

一個該頁面應該給你你想要的東西上演示。

從網站：

幻燈片不限於圖片。你可以使用任何你想要的元素。

Answer 3

做類似下面的代碼，

var delay = 1000; 
$(document).ready(function() { 
    $('#fade p').fadeOut(0).each(function(i) { 
     $(this).delay(i * delay).fadeIn(1000); 
    }); 
}); 

演示：http://jsbin.com/oqidi3