使用setTimeout的交错动画是断断续续的

Staggered animation, using setTimeout, is choppy

本文关键字：断断续续 动画 setTimeout 使用      更新时间：2023-09-26

我正在快速连续地设置三个元素的动画，因此它们的渐变看起来重叠。循环使用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

小提琴在大多数情况下似乎工作得不太好，但在我的真实世界示例中，它的动画效果参差不齐（通常在3-10帧/秒左右）。页面上方还有一个自动滑块，这可能是造成问题的原因。

我该如何解决这个问题？

最好使用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);
        });
    });
};

这是一把小提琴；

相关文章：