使用jquery动画HTML元素文本的每个字符？

我想用jQuery的动画从HTML元素中采取的文本字符串：使用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); 

     } 
});

这是比特，其中即时卡住。感谢

来源

2012-07-23 unknown

您必须将每个字符包裹在一个范围内 - 文本节点是不可分割的。 – Alnitak 2012-07-23 15:07:44

我不确定如果没有将每个字符分隔到另一个容器中，例如''，都是可能的。我想你可以先做，然后通过它们循环。 – Thor84no 2012-07-23 15:07:46

你是多么有趣的想法！让我试试看！！谢谢 – unknown 2012-07-23 15:09:41

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

CNC中

工作jSFIDDLE

-edit 2-

而不凌乱HTML JSFIDDLE （以及它仍然凌乱，但JavaScript使它凌乱;））

来源

2012-07-23 15:09:07 rsplak

我同意。但是不要用这些不合逻辑的东西来泛滥你的html代码。使用[lettering.js]（http://letteringjs.com/）工具。 – Marakoss 2012-07-23 15:15:05

http://jsfiddle.net/J4jgS/3/您的JS deosnt工作 – unknown 2012-07-23 15:16:56

@Marakoss真。做编辑（还在做我的HTML在客户方凌乱）与读取HTML模板 – rsplak 2012-07-23 15:21:03

<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. 

});

这将动画每个字符。

来源

2012-07-23 15:10:03 ExceptionLimeCat

这个deosnt动画字母，它动画所有他们一次！ :)） – unknown 2012-07-23 15:15:15

现在看看。应该管用。 – ExceptionLimeCat 2012-07-23 15:25:59

如果你要保持你的HTML干净，我要补充下面的方法来包装标签span你的角色。执行使用wrapCharacters($("h1"))您动画任何东西之前，然后由动画返回$(".animate")这个人物的onLoad。

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

来源

2012-07-23 15:14:20 Thor84no

你可以澄清使用这个更多！ – unknown 2012-07-24 12:42:11

在函数的开始处运行onLoad在任何要执行此动作的元素上执行此操作（'wrapCharacters（$（“h1”））''如果只有一个h1标记，则罚款，否则循环并执行' wrapCharacters' - 你可以使用'$ .each'来代替），它应该用适当类的范围包装容器中的所有字符，然后使用rsplak的答案来说明如何为这些跨度设置动画。 – Thor84no 2012-07-24 13:35:10

使用jquery动画HTML元素文本的每个字符？

回答

相关问题