該需求出現原因：想要實現一個在一開始載入頁面時就出現一行文字逐漸出現的效果，且需要實現的是一種逐漸的過渡出現效果為不是一種生硬的突然間歇性出現。於是便開始嘗試利用最近正在學習的jQuery技術和JS實現。 【註】：該篇文章適合初學者閱讀，大佬請跳過。 【需要的知識點】：JS中利用Timing中的兩個 ...
該需求出現原因：想要實現一個在一開始載入頁面時就出現一行文字逐漸出現的效果，且需要實現的是一種逐漸的過渡出現效果為不是一種生硬的突然間歇性出現。於是便開始嘗試利用最近正在學習的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），第二個參數實現效果作用時間。
