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

animate every char of an html element text using jquery?

本文关键字：字符 设置 动画 文本 jquery html 元素 使用      更新时间：2024-02-08

我想使用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 );
        }
 });

这是我卡住的地方。感谢

您可以在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-

没有混乱的HTMLJSFIDDLE（好吧，它仍然很混乱，但javascript会让它变得混乱；）

如果你想保持HTML的整洁，我会添加以下方法来将你的字符包装在span标记中。在设置任何内容的动画之前，请使用wrapCharacters($("h1"))执行此onLoad，然后设置$(".animate")返回的角色的动画。

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

<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.
});

这将为每个角色设置动画。

相关文章：