使用jquery为html元素文本的每个字符设置动画效果？

Question

我想使用jquery为从html元素中获取的文本字符串设置动画:

<h1>Animate</h1>

对于jquery部分:

$(document).ready(function() {

$( "h1" ).animate({ fontSize: "90px" }, 1500 )
     .animate({ fontSize: "50px" }, 1500 );

});

这会动画整个h1文本值,但我想为h1文本中的每个字符设置动画.

第二个jquery部分:

$(document).ready(function () {

    var animateChar = $("h1").text();
    for(i=0; i<animateChar.length; i++) {

        //alert(i + ': ' + animateChar.charAt(i));
        // for every animateChar.charAt[i] want to run this
        //jquery animation.
        //$( "h1" ).animate({ fontSize: "90px" }, 1500 )
        //.animate({ fontSize: "50px" }, 1500 );

        }
 });

这是我陷入困境的一点.谢谢

Answer 1

您可以在DOM元素上使用jQuery函数.不是人物分开.您应该为每个字符使用不同的DOM元素:

<span>A</span><span>N</span><span>I</span>...

有这样的事情必须做到这一点

$('span').each(function() {
    var that = $(this);
    setTimeout(function() { 
        that.animate({ fontSize: "90px" }, 1500 )
            .animate({ fontSize: "50px" }, 1500 );
    },that.index()*100);
});?

-编辑-

工作jSFIDDLE

- 编辑2-

没有凌乱的HTML JSFIDDLE(它仍然很乱,但javascript使它变得混乱;))