使用jQuery逐个显示角色动画

我的客户想要一个由一个字符一个字符组成的主页。 我以前没有做过类似的事情，所以我自己在jQuery中使用

setInterval

尝试了一些东西

$（文档）.ready（函数（）{
animatorFadeIn（）；
});
函数animatorFadeIn（）{
var outerStop=setInterval（函数（）{
var data='这是一个测试动画'；
var inc=0；
var单位=“”；
var stop=setInterval（函数（）
{ 
如果（包括<数据长度）{
单位=单位+数据[inc]；
$（'#title'）.html（单位）；
inc=inc+1；
如果（inc==data.length）
清除间隔（停止）；
}
}, 50);
净空间隔（外顶）；
},1000);
}

---

一种可能的方法：

(function() {
  $.fn.onebyone = function(string, settings) {
    var stringLength = string.length,
      chars = string.split(''),
      index = 0,
      that = this;

    that.text('');

    function addLetter() {
      that.text( that.text() + chars[index] )
    }

    var write = setInterval(function() {
      addLetter();
      index++;
      if (index === stringLength) {
        clearInterval(write);
      }
    }, settings.interval);

    return this;
  };
})(jQuery);

用法：

<div id="t" data-text="Hello World!"></div>

(function() {
  $(function() {
    $('#t').onebyone($('#t').data('text'), {interval: 500});
  });
})(jQuery);

（功能（）{
$（函数（）{
$（'t'）。一个接一个（$（'t'）。数据（'text'），{interval:500}）；
});
})（jQuery）；

---

另一种方法是使用空白nowrap和overflow visible:）将原始0宽度div设置为其全宽动画。

一种可能的方法：

(function() {
  $.fn.onebyone = function(string, settings) {
    var stringLength = string.length,
      chars = string.split(''),
      index = 0,
      that = this;

    that.text('');

    function addLetter() {
      that.text( that.text() + chars[index] )
    }

    var write = setInterval(function() {
      addLetter();
      index++;
      if (index === stringLength) {
        clearInterval(write);
      }
    }, settings.interval);

    return this;
  };
})(jQuery);

用法：

<div id="t" data-text="Hello World!"></div>

(function() {
  $(function() {
    $('#t').onebyone($('#t').data('text'), {interval: 500});
  });
})(jQuery);

（功能（）{
$（函数（）{
$（'t'）。一个接一个（$（'t'）。数据（'text'），{interval:500}）；
});
})（jQuery）；

---

另一种方法是使用空白nowrap和overflow visible:）将原始0 width div设置为全宽动画。

旁注：在第一次迭代后设置间隔并始终停止间隔没有多大意义。使用

setTimeout（）

代替。也就是说，对于这样的效果。还是你在问如何在旧版本中修复此脚本？在这种情况下，你需要比“这不起作用”更具体一些。旁注：在第一次迭代之后，制定一个间隔并总是停止它没有多大意义。使用

setTimeout（）

代替。也就是说，对于这样的效果。还是你在问如何在旧版本中修复此脚本？在这种情况下，你需要比“这不起作用”更具体一些