Question

问候，

我正在尝试逐个淡入淡出文本范围，在使用jQuery之前逐渐淡出每个文本范围。

<p>IN
<span class="fadeText">spiring</span>
<span class="fadeText">nnovative</span>
<span class="fadeText">genious</span>
</p>

跨度将设置为隐藏在CSS中，尝试从一个跨度淡入到下一个跨度，并以最后一个仍然可见的结尾。我使用$(".fadeText").each和fadeIn()，fadeOut()尝试了几种组合，但似乎无法产生这种效果。

非常感谢任何帮助

由于

Answer 1

现场演示： http://jsfiddle.net/xHnzP/1/

var spans = $('span.fadeText');

function loop(span) {
    span.fadeIn(1000).delay(1000).fadeOut(1000, function() { 
        loop( span.next().length ? span.next() : spans.first() );
    });
}

loop( spans.first() );

顺便说一句，上面的代码在无限循环中淡化span元素。如果你只是想让它们全部通过一次，那么代码就更简单了：

现场演示： http://jsfiddle.net/xHnzP/2/

var spans = $('span.fadeText');

function loop(span) {
    span.fadeIn(1000).delay(1000).fadeOut(1000, function() { 
        span.next().length && loop( span.next() );
    });
}

loop( spans.first() );

<强>更新

我没有注意到您希望最后一个SPAN保持可见。这是更新的代码：

现场演示： http://jsfiddle.net/xHnzP/5/

var spans = $('span.fadeText');

function loop(span) {
    span.fadeIn(1000, function() {
        span.next().length && span.delay(1000).fadeOut(1000, function() {
            loop( span.next() );
        }); 
    });
}

loop( spans.first() );

你可以看到，与frist两个版本（上图）不同，这个第三个版本需要两个嵌套回调（在淡入之后，检查它是否是最后一个SPAN，并在淡出后，调用函数的下一个循环））。

此外，如果您无法确定这一点，span.next().length是一个检查，根据当前是否至少再有一个SPAN返回true / false（acutally 1/0）。

Answer 2

<强> View a demo of the following here.

这可以通过创建以索引作为参数的函数来完成，对.fadeText元素的索引执行淡化动画，增加索引并在剩余元素时调用自身。像这样：

var fadeNext = function ( i ) {

    var $ft = $('.fadeText'),
        timeVal = 1000;

    $ft.eq( i ).fadeIn(timeVal, function(){

        i++;

        if (i < $ft.length) {
            $(this).delay(timeVal).fadeOut(timeVal, function(){
                fadeNext( i );
            });
        }

    });
}

fadeNext( 0 );

编辑：更新以满足在最后一个跨度上停止的要求，并删除不正确的递归引用。

Answer 3

这是另一种与HTML一起使用的方法，使用自定义触发器来实现递归的效果：

$('span.fadeText').bind('fader', function(e) {
    $(this).fadeIn(500, function() {
        if ($(this).next('span').length) { // if not the last one
            $(this).fadeOut(1000, function() { // fade out
                $(this).next().trigger('fader'); // and move to the next
            });
        } else {
            return false;
        }
    });
}).first().trigger('fader'); // tip the first domino

示例：http://jsfiddle.net/redler/Ru4cv/

Answer 4

试试这个，但是在你的跨度上有一个额外的课程：

  $('.fadeText .one').fadeIn(1000,function() {
       $('.fadeText .two').fadeIn(1000,function() {
           $('.fadeText .three').fadeIn(1000);
        });
   });


  <span class="fadeText one">spiring</span>
  <span class="fadeText two">nnovative</span>
  <span class="fadeText three">genious</span>

您可以调整1000持续时间以增加或减少持续时间。

从一个SPAN淡出到另一个，结束于jQuery

4 个答案: