试图找到一种更简单的方法来制作 jQuery“写作”动画答案

【问题标题】：Trying to find an easier way to make an jQuery "writing" animation试图找到一种更简单的方法来制作 jQuery“写作”动画
【发布时间】：2016-12-21 19:47:50
【问题描述】：

所以我自己的解决方案是。但是，如果文本太长，这将变得乏味。

var typeThis = "blablablablabla:";
var displayText = "";

function type(fullString, typedSoFar) {
  if (fullString.length != typedSoFar.length) {
    typedSoFar = fullString.substring(0, typedSoFar.length + 1);
    document.getElementById(".animatedTyping").innerText = typedSoFar;
    setTimeout(function() {
      type(fullString, typedSoFar)
    }, 100);
  }
}

document.getElementById(".animatedTyping").innerHtml = typeThis;
var element = document.createElement('span');
element.innerHTML = typeThis;
typeThis = element.textContent;
type(typeThis, displayText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2><span class="animatedTyping"></span></h2>

【问题讨论】：

请检查]this answer](stackoverflow.com/a/38222236/3863146) js 也被用于产生适用于任何句子长度的打字效果。
我可以建议您回滚您的编辑，以便将来的读者可以理解这个问题。

标签： jquery html css

【解决方案1】：

您可以使用Typelt

$('.1').typeIt({
     strings: 'This is a simple string.',
     speed: 50
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 

<script src="https://cdn.jsdelivr.net/jquery.typeit/4.3.0/typeit.min.js"></script>
<p><span class="1"></span></p>

【讨论】：

很好的解决方案。但我在找一个不需要插件的

【解决方案2】：

jQuery 感觉有点矫枉过正。您可以使用纯 javascript 来实现相同的效果。只需从完整字符串开始，然后在循环中获取它的子字符串并设置超时以再次运行该函数，直到输入整个字符串。要转义 HTML 编码数据，您可以创建一个新元素，将您的文本添加为 HTML，然后将文本拉出（信用 https://stackoverflow.com/a/9609450/1173776）-

var typeThis = "My typing speed is &lt; fast.";
var displayText = "";

function type(fullString, typedSoFar) {
  if (fullString.length != typedSoFar.length) {
    typedSoFar = fullString.substring(0, typedSoFar.length + 1);
    document.getElementById("animatedTyping").innerText = typedSoFar;
    setTimeout(function() {
      type(fullString, typedSoFar)
    }, 100);
  }
}

document.getElementById("animatedTyping").innerHtml = typeThis;
var element = document.createElement('span');
element.innerHTML = typeThis;
typeThis = element.textContent;
type(typeThis, displayText);

Watch me type -&lt;span id="animatedTyping"&gt;&lt;/span&gt;

【讨论】：

这也适用于符号吗？例如<和 ⁄ ？？？计算机能否将它们作为单个字符读取？
@suonpera 使用 typelt 你可以使用这个符号，但是如果你想使用 js 你必须额外实现它们我认为
@suonpera HERE 你可以看看不用jquery怎么做
感谢@theoretisch 我已经更新了我的答案以避免使用 jQuery
@suonpera 在您的代码中，您按类引用您的元素，而在我的代码中，我使用元素 ID，在这种情况下，如果您的文本被添加到，我认为这是更好的方法一个特定的元素。