前提：
你必须了解js的闭包（否则你看不懂滴）
我们就来做一个js实现jq animate的动画效果来简单探索一下，js动画实现的简单原理；
html代码 <div id="man" style="background:gray; height:1px; width:100%;"> </div>
原理：就是让它的高度逐渐从 1px ----100px
jq 代码实现：$("#id").animate({height:"100px"})
JS (too yong too simple) 代码实现方式：
function addHeight(){ var obj=document.getElementById("man"); for(var i=1;i<10;i++){ var len=i*10; obj.style.height=len+"px"; }} //为什么too young too simple 我不解释；
JS(sometimes naive)代码实现方式：
function addHeight2(){ var obj=document.getElementById("man"); for(var i=1;i<10;i++){ setTimeout(function(){ var len=i*10; obj.style.height=len+"px"; },i*1000) }}
//为什么说 sometimes naive 呢？ 因为你的 i 直接就等10 了 不信你 alert 一下，就是10；
//这里还需要插播一点关于setTimeout 的使用方法；
setTimeout 的使用方法
var g=100;
function Test(val){ alert(val); } setTimeout(Test,3000); //三秒手执行 setTimeout(Test(),3000); //马上执行 setTimeout(Test(g),3000); //马上执行 //那么，我们如何传递参数呢； //方式一（如果是静态参数的话） setTimeout(function (){ Test("静态参数"); },3000) //方式二（如果是动态参数） setTimeout(function (g){ Test(g); }(g),3000) //方式三（通用） 这里的参数只能是字符串； setTimeout("Test("+g+")");
分析，问什么，i会变成10 呢？
答案如下：
function addHeight3(){var obj=document.getElementById("man"); for(var i=1;i<10;i++){setTimeout(function(){ alert(i) //什么变量i是10 呢 //你可以借助异步的概念来理解； //第一次循环 i=1 //seTimeout 中的 delay=1000 //在着1000内 循环，早已结束，结果i=10 //现在的问题就是 将 i 传递进去呢； },i*1000) }} 改进
function addHeight4(){var obj=document.getElementById("man"); for(var i=1;i<10;i++){ setTimeout(function(para){ //这样写的话 是可以将参数传递进去，不过函数会立即执行；没有时间间隔！ alert(para); //1 2 3 4 5 6 7 8 9 10 }(i),i*5000) //也就是说，这里的delay 时间设置无效果； }} 最总完整代码：（并不推荐这种方式来实现动画）
function addHeight(){ var obj=document.getElementById("man"); for(var i=1;i<10;i++){ setTimeout((function(para){ // 第一个函数（也就是function(para)）执行后 ,返回 返回函数引用（函数体） return function (){ //立即执行之后 返回一个匿名函数； var len=para*10; //这个参数可以理解成 动画元素中帧的概念！ obj.style.height=len+"px"; } })(i),i*20) //如果想让效果平滑一点，那么 就将时间参数设置小一点呀； }} //这样就实现jq animate的效果的；
实现不停地变化，我们用setInterval来实现（就是，在最外层嵌套一个seInterval函数；）
扩展
我们可以使用opacity 来达到渐变的效果的呀；
代码如下：
function addHeight(){ var obj=document.getElementById("man"); for(var i=1;i<10;i++){ setTimeout((function(para){ return function (){ obj.style.opacity=para; } })(i/10),i*1000) }}
总结：
其实这种实现方式并不是最佳的，最佳实现方式
情看我的JS-实现动画原理二（非闭包方式）
---------------------------------------------------------------------更新：有了新的方法LET 产生局部变量滴啊；
下边附带各种草稿；
這裡還有一種情況：就是我們數組；
function showInfo(){ //现在还有我们想要的基本法则； var arr=[]; for (var i=0;i<5;i++){ arr[i]=function (){ return i; } } console.log(arr); console.log(arr[0]()); console.log(arr[1]()); var arr=[]; for (var i=0;i<5;i++){ arr[i]=i; //这里已经进行了赋值操作操作呀； } console.log(arr); console.log(arr[0]); console.log(arr[1]); //然后我们通过传递参数的形式 var arr=[]; for (var i=0;i<5;i++){ ///一个立即执行的函数里，返回一个函数;再加上我们的()就执行了的啊； arr[i]=(function (index){ return function (){ return index; } })(i) } console.log(arr); console.log(arr[0]()); console.log(arr[1]()); //当然，最后，可以使用我们es5 中的 let关键之； }