输入动画文字

Question

我的DIV标签里面有文字.是否可以使用打字效果更改循环中的文本内容,在其中键入,然后向后删除字母并重新开始使用新文本？这有可能与jquery？

Answer 1

只是一个简单的方法:

$("[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你的元素,逐个字符地插入,并且脉冲"插入符号"不是:after该SPAN 的CSS3动画元素.

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