Animation 和 JQuery，请告诉我一个更好的“方法”

Question

抱歉，我是一个 JS 新手（-：我必须在 div 中为一些 span 标签设置动画，这段代码可以工作，但看起来很糟糕......

$('#div span.t1').fadeIn(1500, function() {
        $(this).next().fadeIn(1500, function() {
            $(this).next().fadeIn(1500, function() {
                $(this).next().fadeIn(1500, function() {
                    $(this).next().fadeIn(1500, function() {
                        $(this).next().fadeIn(1500, function() {
                            $(this).next().fadeIn(1500, function() {
                                $(this).next().fadeIn(1500, function() {
                                    $(this).next().fadeIn(1500, function() {
                                        $('#ownage').animate({
                                            backgroundColor: 'red',
                                            color: '#FFF',
                                            fontSize: '30px'
                                        }, 2000);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });

Html 示例：

<div id="div">
<span class="a1">TEXT1</span>
<span class="a2">TEXT2</span>
...
</div>

有没有“更快”的方法？

Answer 1

将 class lastSpan添加到您正在制作动画的最后一个跨度并尝试以下代码。 没试过所以不知道效果如何。

$('#div span.t1').fadeIn(1500, FadeInNext);

function FadeInNext() {
    if ($(this).hasClass('lastSpan')) {
        $(this).next().fadeIn(1500, AnimateOwnage);
    } else {
        $(this).next().fadeIn(1500, FadeInNext);
    }
}

function AnimateOwnage() {
    $('#ownage').animate({
        backgroundColor: 'red',
        color: '#FFF',
        fontSize: '30px'
    }, 2000);
}

Answer 2

也许像这样递归（假设$('#ownage')嵌套在spans中）：

function myFadeIn($elem, $stop, duration) {
   if($elem.is($stop)) {
        $stop.animate({
            backgroundColor: 'red',
            color: '#FFF',
            fontSize: '30px'
        }, 2000);
        return;
   }
   else {
        $elem.fadeIn(duration, function () {
            myFadeIn($elem.next(), $stop, duration);
        });
   }
}

myFadeIn($('#div span.t1'), $('#ownage'), 1500);

Answer 3

它并没有真正更快，因为我们仍在使用相同的一般流程。 我想这更多是为了让它更具可读性。 也许是这样的：

function animateStart() {
  var curSpan = $('#div span.t1');
  curSpan .fadeIn(1500, function(){animateNext(0,curSpan)});
}

function animateNext(x,curSpan) {
   var nextSpan = $(curSpan).next();
   if(x < 10) {//or use another forking condition
     nextSpan.fadeIn(1500,function(){animateNext(x+1,nextSpan)});
   }else {
     $('#ownage').animate({
                           backgroundColor: 'red',
                           color: '#FFF',
                           fontSize: '30px'
                           }, 
               2000);
   }
}