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

将类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);
   }
}

用JQuery动画，请给我一个更好的“方式”

3 个答案: