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

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

<h1>Animate</h1>

这将为整个h1文本值设置动画，但是我希望为h1文本中的每个角色设置动画

第二个jquery部分：

$(document).ready(function() {

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

});

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

        }
 });

$（文档）.ready（函数（）{
var animateChar=$（“h1”）.text（）；
对于（i=0；i您可以在DOM元素上使用jQuery函数。而不是单独在字符上使用。您应该为每个字符使用不同的DOM元素：

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

-编辑-

工作

-编辑2-

如果没有凌乱的HTML（虽然仍然凌乱，但javascript会让它变得凌乱；）
您可以在DOM元素上使用jQuery函数，而不是在字符上使用jQuery函数。您应该为每个字符使用不同的DOM元素：

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

-编辑-

工作

-编辑2-

没有凌乱的HTML（虽然仍然凌乱，但javascript让它变得凌乱；）
Animate
$（文档）.ready（函数（）{
var计数=0；
函数动画（elm）{
如果（计数==$（“.animate”）.length）
{
清除间隔（id）；
回来
}
$（elm）.animate（{fontSize:“90px”}，1500）
.animate（{fontSize:“50px”}，1500）；
计数++；
}
var id=setInterval（动画（$（“.animate”）[count]），3200）；//给动画运行时间。
});

这将为每个角色设置动画。
设置动画
$（文档）.ready（函数（）{
var计数=0；
函数动画（elm）{
如果（计数==$（“.animate”）.length）
{
清除间隔（id）；
回来
}
$（elm）.animate（{fontSize:“90px”}，1500）
.animate（{fontSize:“50px”}，1500）；
计数++；
}
var id=setInterval（动画（$（“.animate”）[count]），3200）；//给动画运行时间。
});

这将为每个角色设置动画。
如果您希望保持HTML干净，我将添加以下方法将角色包装在
span
标记中。在设置任何动画之前，使用
wrapCharacters（$（“.h1”）
执行此加载，然后对
$（.animate”）
返回的角色设置动画

函数wrapCharacters（obj）
{
var html=''；
var text=obj.text（）；
对于（变量i=0；i
如果您想保持HTML的整洁，我会添加以下方法将您的角色包装在
span
标记中。在设置任何动画之前，使用
wrapCharacters（$（“.h1”）
执行此加载，然后设置由
$（.animate”）
返回的角色的动画

函数wrapCharacters（obj）
{
var html=''；
var text=obj.text（）；
对于（变量i=0；i
您必须将每个字符包装在一个跨文本节点中，因为节点是不可分割的。如果不将每个字符分离到另一个容器（如
）中，我不确定这是否可行。我想您可以先这样做，然后循环遍历它们。是的，这是一个有趣的想法！！让我试试！！谢谢您必须将每个字符包装在一个跨文本节点中span-文本节点是不可分割的。如果不将每个字符分离到另一个容器（如
）中，我不确定这是否可行。我想你可以先这样做，然后在它们之间循环。是的，这是一个有趣的想法！！让我试试！！谢谢我同意。但不要用这些不带语义的东西来淹没你的html代码。使用工具。@Marakoss True。使用可读模板htmlI进行编辑（在客户端仍然使我的HTML凌乱）。我同意。但不要用这些不神圣的东西淹没HTML代码。使用工具。@marakos True。进行编辑（在客户端仍然使我的HTML凌乱）使用可读模板HTMLHIS deosnt为字母设置动画，它一次为所有字母设置动画！：）此deosnt为字母设置动画，它一次为所有字母设置动画！：）您能进一步说明一下吗！！在函数开始时，运行onLoad，在您想要设置动画的任何元素上执行此操作（
wrapCharacters（$（（$h1）））
如果只有一个h1标记就可以了，否则循环它们并在每个h1标记上执行
wrapCharacters
-您可以使用
$。每个
用于此），它应该将所有字符包装在一个具有适当类跨度的容器中，然后使用rsplak关于如何设置这些跨度的答案。您能否进一步说明如何使用此选项！！在函数开始时，运行onLoad，在您想要设置动画的任何元素上执行此操作（
wrapCharacters（$（“h1”））
如果只有一个h1标记就可以了，否则循环它们并对每个标记执行
wrapCharacters
操作-您可以使用
$。为此，每个
），它应该将所有字符包装在一个具有适当类跨度的容器中，然后使用rsplak关于如何设置这些跨度的答案。
<span class="animate">A</span><span class="animate">n</span><span class="animate">i</span><span class="animate">m</span><span class="animate">a</span><span class="animate">t</span><span class="animate">e</span>

$(document).ready(function() {

   var count = 0;       

   function animation(elm) {
       if(count == $(".animate").length)
       {
          clearInterval(id);
          return;
       }

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

   var id = setInterval(animation($(".animate")[count]), 3200);//Give time for animation to run.

});

function wrapCharacters(obj)
{
    var html = '';
    var text = obj.text();
    for (var i = 0; i < text.length; i++)
    {
        html += '<span class="animate">' + text[i] + '</span>';
    }
    obj.html(html);
}