jquery - 带循环的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