时间戳

首页 > 解决方案 > 如何在 foreach 循环中为我的动画文本延迟 .append

javascript - 如何在 foreach 循环中为我的动画文本延迟 .append

问题描述

嗨，我的动画会向上滑动文本，但速度太快，我想放慢速度。我正在使用 .pend 让动画正常工作。

这是我的代码，我只想减慢附加的速度

$splitByWords.each(function () {

var $this = $(this);
var words = $this.text().split(" ");
$this.empty();
var space;
$.each(words, function (i, v) {
  space = v === ' ' ? ' class="space"' : '';

    $this.append("<span" + space + ">" + v + "</span>";


});

});

谢谢，

标签： javascriptanimation

解决方案

你可以把它包setTimeout起来。请注意，增加超时时间很重要，否则，单词会延迟出现，但会同时出现。据我了解，您希望一个词一个接一个地出现，每个词之间有短暂的延迟。

另请注意，未使用在您的代码中创建space变量的语句，因此我在此省略。您定义words为用空格分割一些文本。因此，单词数组将不包含任何单个空格字符。因此，用于赋值的三元运算符space总是返回相同的值。

var $this = $(this);
const words = $this.text().split(" ");
$this.empty();
$.each(words, function (i, v) {
  setTimeout(function () {
    $this.append(`<span>${v}</span>`);
  }, i * 100);
});

推荐阅读