使用jQuery显示字符1×1动画

Question

我的客户想要一个句子一个字一个字形成的主页。我以前没有做过这样的事情，所以我使用setInterval在jQuery中自己尝试了一些东西。

​

$(document).ready(function(){
  animatorFadeIn();
});

function animatorFadeIn(){
	var outerStop = setInterval(function(){
		var data = 'This is a test animation';
		var inc = 0;
		var unit = '';
		var stop = setInterval(function()
		{ 
			if(inc < data.length){
			  unit = unit + data[inc];
			  $('#title').html(unit);
			  inc = inc + 1;
			  if(inc == data.length)
			    clearInterval(stop);
			}
	    }, 50);
		clearInterval(outerStop);
	},1000);
}

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

<h1 id="title"></h1>

​

这在版本<9上是行不通的

这是用这种方式动画文本的正确方法吗？你们能给我介绍一些其他的方法来达到同样的效果吗?这样几乎所有的浏览器都能兼容？

这是小提琴的link。

Answer 1

一种可能的方法是：

(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);

See it in action.

另一种方法可以是将原始的0宽度div动画到其全宽度，使用空格游走和溢出可见:)