為了做好導航菜單，有時候需要在菜單下拉的時候實現動畫效果，所以這幾天就研究了研究如何用js實現動畫效果，實現動畫核心要用到兩個函數，一個是setTimeOut,另一個是setInterval.
下邊我就簡單說一下過程和原理。
第一步：實現一個匿名函數並能自己執行。
（function(){ }）()
這個函數在一樣編的好的JS代碼中經常會見到，起到閉包，自動執行的效果，在函數后加一對()表示自動執行，前邊的匿名函數需要用()包起來，這樣才能為宿主（我們的BOM環境）理解，里面的function(){}這就是個匿名函數。
第二步：實現動畫，以改變一個box的秀明度來說明。
id為animation的div
<div id="animation"></div>
要實現animation的透明漸變,需要不斷改變其透明度opacity,我們這樣實現
for(var i=0;i<10;i++){
setTimeout((function(pos){
return function(){
someAnimation(pos);
}
})(i/10),i*100)
}
下面我們來解釋一下這段代碼，這段代碼比較復雜和難於理解，所以剛開始不明白也沒事，慢慢就懂了,首先解釋一下setTimeout在此處的用法
setTimeout((function(){})(i/10),i*100)
setTimeout第一個參數為要執行的函數，第二個參數為時間參數，意為多久后開始執行
而js沒有塊的概念，作用域范圍是以函數為准的，所以我們這里使用的閉包，實現原理如下：
(function(){
return function(){}
})()
這校才可以執行for循環，達到我們想要的結果，如果我們不使用閉包，代碼會如下：
for(var i=0;i<10;i++){
setTimeout(function(pos){
someAnimation(pos);
}(i/10),i*100)
}
這樣的for循環只會執行一次，即i=9時，感興趣的同學可以自己試試
到目前為止，整個代碼是這個樣子滴
(function(){
function someAnimation(args){
document.getElementById("animation").style.opacity=args;
}
for(var i=0;i<10;i++){
setTimeout((function(pos){
return function(){
someAnimation(pos);
}
})(i/10),i*100)
}
})()
這樣實現了id為animation的box透明度從0到1的一次變化。
第三步，實現不停地變化，我們用setInterval來實現
setInterval也是兩個參數，第一個是要執行的函數，第二個是執行間隔時間
至此代碼如下：
(function(){
function someAnimation(args){
document.getElementById("animation").style.opacity=args;
}
setInterval(function(){
for(var i=0;i<10;i++){
setTimeout((function(pos){
return function(){
someAnimation(pos);
}
})(i/10),i*100)
}
},2000);
})()
下次我會實現這個代碼的面向對象化設計和出一些具體的實現方案，方便學習使用。
全部代碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> #animation{width:500px;height:350px;background-color:red;} </style> </head> <body> <div id="animation"> </div> <script type="text/javascript"> (function(){ function someAnimation(args){ document.getElementById("animation").style.opacity=args; } setInterval(function(){ for(var i=0;i<10;i++){ setTimeout((function(pos){ return function(){ someAnimation(pos); } })(i/10),i*100) } },2000); })() </script> </body> </html>