交错动画，使用setTimeout，是起伏不定的

Question

我是动画的三个元素在快速继承，所以他们的褪色似乎重叠。使用setInterval循环并交错使用setTimout，我的当前代码如下所示：

标记：

<div class="contents">
    <p class="content">Lorem ipsum dolor sit amet, vidisse deseruisse vim an, mel ad dolores accusata deseruisse. Integre civibus comprehensam his at. Tibique iracundia cu vel, has at luptatum scriptorem. Autem causae omnesque eos te. Mel ad reque noster. Feugiat eleifend maiestatis ut per, maluisset consulatu est ea.</p>
    <p class="content">Sea no cibo praesent. Partem scribentur te eum. Ius in odio mucius, praesent delicatissimi vis ei, mel eu iuvaret honestatis. Cu tantas omnium necessitatibus eam.</p>
    <p class="content">Ut mea ubique putant perfecto. Debet audiam electram vis eu, doctus contentiones ea usu. Cu qui legere possim corrumpit. Quo utinam disputando te, vix decore accusam reprehendunt ex, vis eu mutat delenit. Mel ad nulla vivendum, reprimique voluptatibus et sea.</p>
</div>

动画：

var updater = function(el){
    var $el = $(el);
    $el.fadeTo(500, 0, function(){
        // Update content here
        $el.fadeTo(500, 1);
    })
};

var reviewTimer = window.setInterval(updateReviews, 3000);

function updateReviews() {
    $.each( $('.content'), function(i, el){
        var $this = $(el);
        setTimeout( function(){
            updater($this)
        }, 0 + ( i * 250 ));
    });
};

​

var updater = function(el){
    var $el = $(el);
    $el.fadeTo(500, 0, function(){
        // Update content here
        $el.fadeTo(500, 1);
    })
};

var reviewTimer = window.setInterval(updateReviews, 3000);

function updateReviews() {
    $.each( $('.content'), function(i, el){
        var $this = $(el);
        setTimeout( function(){
            updater($this)
        }, 0 + ( i * 250 ));
    });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contents">
    <p class="content">Lorem ipsum dolor sit amet, vidisse deseruisse vim an, mel ad dolores accusata deseruisse. Integre civibus comprehensam his at. Tibique iracundia cu vel, has at luptatum scriptorem. Autem causae omnesque eos te. Mel ad reque noster. Feugiat eleifend maiestatis ut per, maluisset consulatu est ea.</p>
    <p class="content">Sea no cibo praesent. Partem scribentur te eum. Ius in odio mucius, praesent delicatissimi vis ei, mel eu iuvaret honestatis. Cu tantas omnium necessitatibus eam.</p>
    <p class="content">Ut mea ubique putant perfecto. Debet audiam electram vis eu, doctus contentiones ea usu. Cu qui legere possim corrumpit. Quo utinam disputando te, vix decore accusam reprehendunt ex, vis eu mutat delenit. Mel ad nulla vivendum, reprimique voluptatibus et sea.</p>
</div>

​

小提琴

小提琴似乎没有太差，大多数情况下，但在我的现实世界的例子中，它的波动动画(通常在3-10 fps左右)。页面上方还有一个自动滑块，这可能是造成问题的原因。

我怎样才能避开这个问题呢？

Answer 1

最好使用jQuery的延迟方法来实现计时效果。我将转储您的updater方法并简化updateReviews方法：

var reviewTimer = window.setInterval(updateReviews, 3000);

function updateReviews() {
    $.each( $('.content'), function(i){
        $(this).stop(true, true).delay(i * 250).fadeTo(500, 0, function(){
            // update content here
            $(this).fadeTo(500, 1);
        });
    });
};

这是一个小提琴；