错开动画，使用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>

jsfiddle

这个fiddle在大多数情况下似乎表现得不错，但在我的实际例子中，它的动画效果很差（通常在3-10 fps左右）。页面上还有一个自动滑块，可能也是问题的原因。

我该如何解决这个问题？

- verism

---

不要混淆setTimeout和jQuery动画-它们不同步，事件最终会重叠。 - Alnitak

@Alnitak - 以前不知道。谢谢。 - verism

Answer 1

最好使用jQuery的delay方法来实现时间效果。我建议删除您的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);
        });
    });
};

这是一个示例代码；

- shennan

---

我不认为在这里使用.dequeue()有任何作用。只有当您将其与放置在.queue()中的非同步函数结合使用时，才会发挥作用。由于它位于淡入淡出的回调中，因此该对象不再处于效果队列中 - 如果适用的话。实际上，fadeTo是同步的，因此您甚至不需要回调，只需将其链接到前一个回调即可。 [Fiddle]（http：// jsfiddle.net/2ynLnb26/） - Shikkediel

@Fiddle是正确的。我正在使用一些样板代码中的dequeue，这些代码用于一些异步回调。已更新答案。 - shennan

请检查几个评论之前的小提琴，因为fadeTo将对象放入效果队列并使其同步，所以您实际上不需要回调。有趣的是，Shashank的演示报告了“inprogress”，我认为这是因为回调也是一个队列函数。但是你不需要在它上面使用.dequeue()。 - Shikkediel

@Shikkediel，回调函数非常适合更新功能。请参见OP代码中的注释// Update content here。理想情况下，更新应在成功回调中完成，并且这是最清晰的传达方式，我的看法是如此。 - Shashank

@Shashank 是的，我认为回调函数应该保持原样。很明显，这是原帖作者想要放置更新逻辑的地方。实际上，我认为这是最好的位置，特别是如果它是异步的，并且任何更新问题都需要将下一个效果分阶段排队。 - shennan