使用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元素文本的每個字符？

回答

相關問題