动画使用jQuery一个HTML元素的文本字符每？ [英] animate every char of an html element text using jquery?

问题描述

我想动画使用jQuery从HTML元素中采取的文本字符串：

i want to animate a string of text taken from an html element using jquery:

<h1>Animate</h1>

在jQuery的部分：

for the jquery part:

$(document).ready(function() {

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

});

这动画整个H1文本值，但是我想动画中的H1文本的每个字符。

this animates the whole h1 text value, however i want to animate each character in the h1 text.

第二部分jQuery的：

the second jquery part:

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

        }
 });

这就是IM卡位。谢谢

推荐答案

您可以在DOM元素使用jQuery功能。而不是分开的字符。你应该使用不同的DOM元素的每个字符：

You can use jQuery functions on DOM elements. Not on characters apart. You should use different DOM elements for each character:

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

像这样的东西必须做的伎俩

with something like this must do the trick

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

-edit -

-edit-

的jsfiddle

2 -edit -

-edit 2-

而不凌乱HTML 的jsfiddle （以及它仍然是混乱的，但JavaScript的使杂乱;））

without messy HTML JSFIDDLE(well it's still messy, but javascript makes it messy ;) )

这篇关于动画使用jQuery一个HTML元素的文本字符每？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！