我们如何使用 jquery 逐个字母地显示文本？

Question

  var showText = function (target, message, index, interval) 
  {    
    if (index < message.length) 
    { 
      $(target).append(message[index++]); 
      setTimeout(function () { showText(target, message, index, interval); }, interval); 
    } 
  }
  $(function () 
  { 
    showText(".animate", "College Search Simplified", 0, 100);    
  }); 

<script  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
<div class="animate"></div>

在此代码中，文本仅动画一次，即逐个字母。那么，如何使用 jquery 连续重复此文本的字母。

Answer 1

var showText = function(target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function() {
      showText(target, message, index, interval);
    }, interval);
  } else {
    index = 0;
    $(target).html('');
    showText(target, message, index, interval);
  }
}
$(function() {
  showText(".animate", "College Search Simplified", 0, 100);
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<div class="animate"></div>

上面的工作小提琴