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 lib？

编辑：感谢您的所有回复。我想我把这个问题弄错了。我希望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

带循环的div内的淡化元素

3 个答案: