输入动画文本 [英] typing animated text

问题描述

我有带有文本的 DIV 标签.是否可以通过打字效果在循环中更改文本内容，在那里打字，然后向后删除字母并从新文本开始?jquery可以做到这一点吗?

I have DIV tag with text inside. Is it possible to change the text content in a loop with a typing effect, where it types out, then goes backward deleting the letters and starting all over with a new text? Is this possible with jquery?

推荐答案

只是一个简单的方法:

$("[data-typer]").attr("data-typer", function(i, txt) {

  var $typer = $(this),
    tot = txt.length,
    pauseMax = 300,
    pauseMin = 60,
    ch = 0;

  (function typeIt() {
    if (ch > tot) return;
    $typer.text(txt.substring(0, ch++));
    setTimeout(typeIt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
  }());

});

/* PULSATING CARET */
[data-typer]:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  width:1px;
  height:1em;
  background: #000;
          animation: caretPulsate 1s linear infinite; 
  -webkit-animation: caretPulsate 1s linear infinite; 
}
@keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}
@-webkit-keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}

<span data-typer="Hi! My name is Al. I will guide you trough the Setup process."></span>
<h3 data-typer="This is another typing animated text"></h3>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

所以基本上 jQuery 获取元素的 data-text，逐个字符插入，并且脉动的插入符号"不是 CSS3 动画 :after 元素那个 SPAN.

So basically jQuery gets the data-text of your element, inserts character by character, and the pulsating "caret" is nothing by a CSS3 animated :after element of that SPAN.

另见:在 JavaScript 中生成两个数字之间的随机数

这篇关于输入动画文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！