从一个SPAN退到另一个，最后一个是jQuery

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() );

---

UPDATE

我没有注意到您希望最后一个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() );

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

另外，如果您在解决此问题时遇到麻烦， span.next().length是一项检查，它根据当前的SPAN之后是否至少还有一个SPAN返回true / false（通常为1/0）。

Answer 2

在此处查看以下内容的演示。

这可以通过创建以索引为参数的函数，对.fadeText元素在索引上执行淡入淡出动画，增加索引并在还有.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个持续时间以增加或减少持续时间。