該需求出現原因：想要實現一個在一開始加載頁面時就出現一行文字逐漸出現的效果，且需要實現的是一種逐漸的過渡出現效果為不是一種生硬的突然間歇性出現。於是便開始嘗試利用最近正在學習的jQuery技術和JS實現。
【注】：該篇文章適合初學者閱讀，大佬請跳過。
【需要的知識點】：JS中利用Timing中的兩個靜態方法setTimeout()和clearTimeout()實現（詳細參考：http://www.w3school.com.cn/js/js_timing.asp），同時使用了一個遞歸小方法。
1、網頁簡單編寫：
1 <!-- 使用標簽屬性onload： --> 2 <!-- 該屬性實現在頁面加載時完成內部的相關函數方法：show() 事件--> 3 4 <body onload="show()"> 5 6 <!-- 給需要的div命名為word，方便定位元素 --> 7 <div id="word"> 8 9 </div> 10 </body>
2、編寫相關的css樣式表，這里只列出主要的樣式：
1 <style> 2 #word>span{ 3 opacity: 0; 4 } 5 </style>
該處的opacity:0實現使word下面的所有span標簽中的字體變為透明色。
3、引入jQuery庫：
1 <script src="jquery-1.12.4.js"></script>
這里使用1.x版本的最后一版1.12.4版，大家可以在線百度jQuery引入在線版。我這里是在本地就有一個jQuery文檔了，所以可以直接引入。
4、編寫相關的jQuery入口函數：
<script language="javascript" type="text/javascript"> $(function () { //jQuery的入口函數 // 編寫相關的jQuery代碼與JS代碼... }); </script>
5、以下為主要代碼分塊描述：
1 var str="英雄名稱：宮本武藏被動技能：宮本武藏的被動技能為'狩魔'，使宮本武藏" + 2 "釋放技能將會為下一次普通攻擊蓄力，造成額外30（+60%物理加成）點物理" + 3 "傷害並減少所有技能1秒冷卻時間。"; 4 // 測試 5 // console.log(str[3]); 6 // console.log($.isArray(str)); //false 7 8 // 向名為word的div添加指定字數個span標簽，方便操作 9 for (var i=0; i<str.length; i++){ 10 // 添加str的長度個span，每一個span里面保存着一個文字 11 $("#word").append("<span>" + str[i] + "</span>"); 12 }
這里是用於預先將每一個文字添加進span標簽，當然使用div也可以不過這里使用span標簽是因為它是inline元素，不用轉換類型。str是一個字符串，但是在進行isArray()判斷后可以看出其並不是數組，應該是一個偽數組，但依然可以使用str[i]取其中的單個文字。
1 var j = 0; // 用於計數 2 3 // show()方法的另外一種書寫方式 4 show = function () { 5 // $("#word>span"):jQuery語法，選擇器，選中word其中的所有span標簽 6 // eq()：選擇元素，返回jQuery對象 7 $("#word>span").eq(j).animate({opacity:"1"}, 100); 8 j += 1; 9 // setTimeout("要做的動作（方法名）", 時間（毫秒）) 10 // 這里用到了遞歸實現 11 var t = setTimeout("show()", 100); 12 if (j >= str.length){ 13 clearTimeout(t); // 清除延時動作，退出遞歸 14 } 15 }
setTimeout()和clearTimeout()可以自行去w3school查看，這里不贅余描述。
在setTimeout這里使用遞歸實現文字的逐漸顯示，在完成前一個動畫的實現后才會繼續下一層遞歸的方法動畫實現。
$("#word>span");是jQuery語法，相當於css中的選擇器。
eq()方法用於返回專門的jQuery對象，animate()實現動畫效果：第一個是實現透明度的恢復（取值0-1），第二個參數實現效果作用時間。