javascript - 如何使文本显示变慢？

Question

<分区>

Answer 1

这完全取决于你想做什么。如果您只想一次性淡入所有文本(或其他一些动画)，css3 可能足以处理此问题。

如果您尝试逐个字母地显示文本(例如，您会在 RPG 中找到)，那么您将需要代码来遍历字符串并一次写入一个字母.

这是在 javascript 中的一个示例，直接取自 this 对类似问题的回答:

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}

本质上，代码会查看传递给它的数据的每个索引(t，然后是 h，然后是 e)，例如，并一次一个字母地写给你的目标。

有关更多详细信息，请参阅链接的答案。

这是 CSS3 Animations 上的一个很好的链接。 此外，如果您不介意使用插件，jQuery 还可以为许多动画提供一些很棒的功能，这些功能超出了 CSS 本身的功能。

顺便说一句，当您尝试执行这样的动画时，您应该牢记浏览器兼容性。较旧的浏览器可能对这种事情有参差不齐的支持或不支持，所以你应该有后备。

编辑:

很抱歉添加另一个链接，但是 here 是一次显示一个单词的很好的实现。此代码直接取自链接的答案，并添加了我的解释:

var textToDisplay = "Even more awesome text inside here, but displayed one word at a time",
  $output = $("p");

$("button").click(function() {
  var displayInt;
  textToDisplay = textToDisplay.split(' '); //split the text variable into an array
  $output.empty(); //clear out the $output variable
  displayInt = setInterval(function() {
    var word = textToDisplay.shift(); //removes the first word ("Even") and sets the word variable to that value
    if (word == null) { return clearInterval(displayInt); } //if we're out of words to append
    $output.append(word + ' '); //else, add the word and then a space (.split(' ') will not carry over the spaces)
  }, 300); //setInterval is delayed 300ms, so a word will be added every 300ms
});

请注意此方法和我之前添加的方法都使用jQuery($ 符号是一个jQuery字首)。如果您单击指向第二个答案的链接，则会出现一个可让您试用此代码的片段。