~function(){  var myEffect = {    Linear:function(t,b,c,d){      return c*t/d+b    },    Quad: {//二次方的緩動(dòng)（t^2）；      easeIn: function(t,b,c,d){        return c*(t/=d)*t + b;      },      easeOut: function(t,b,c,d){        return -c *(t/=d)*(t-2) + b;      },      easeInOut: function(t,b,c,d){        if ((t/=d/2) < 1) return c/2*t*t + b;        return -c/2 * ((--t)*(t-2) - 1) + b;      }    },    Cubic: {//三次方的緩動(dòng)（t^3）      easeIn: function(t,b,c,d){        return c*(t/=d)*t*t + b;      },      easeOut: function(t,b,c,d){        return c*((t=t/d-1)*t*t + 1) + b;      },      easeInOut: function(t,b,c,d){        if ((t/=d/2) < 1) return c/2*t*t*t + b;        return c/2*((t-=2)*t*t + 2) + b;      }    },    Quart: {//四次方的緩動(dòng)（t^4）；      easeIn: function(t,b,c,d){        return c*(t/=d)*t*t*t + b;      },      easeOut: function(t,b,c,d){        return -c * ((t=t/d-1)*t*t*t - 1) + b;      },      easeInOut: function(t,b,c,d){        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;        return -c/2 * ((t-=2)*t*t*t - 2) + b;      }    },    Quint: {//5次方的緩動(dòng)（t^5）；      easeIn: function(t,b,c,d){        return c*(t/=d)*t*t*t*t + b;      },      easeOut: function(t,b,c,d){        return c*((t=t/d-1)*t*t*t*t + 1) + b;      },      easeInOut: function(t,b,c,d){        if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;        return c/2*((t-=2)*t*t*t*t + 2) + b;      }    },    Sine: {//正弦曲線的緩動(dòng)（sin(t)）      easeIn: function(t,b,c,d){        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;      },      easeOut: function(t,b,c,d){        return c * Math.sin(t/d * (Math.PI/2)) + b;      },      easeInOut: function(t,b,c,d){        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;      }    },    Expo: {//指數(shù)曲線的緩動(dòng)（2^t）；      easeIn: function(t,b,c,d){        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;      },      easeOut: function(t,b,c,d){        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;      },      easeInOut: function(t,b,c,d){        if (t==0) return b;        if (t==d) return b+c;        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;      }    },    Circ: {//圓形曲線的緩動(dòng)（sqrt(1-t^2)）；      easeIn: function(t,b,c,d){        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;      },      easeOut: function(t,b,c,d){        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;      },      easeInOut: function(t,b,c,d){        if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;        return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;      }    },    Elastic: {//指數(shù)衰減的正弦曲線緩動(dòng)；      easeIn: function(t,b,c,d,a,p){        if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;        if (!a || a < Math.abs(c)) { a=c; var s=p/4; }        else var s = p/(2*Math.PI) * Math.asin (c/a);        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;      },      easeOut: function(t,b,c,d,a,p){        if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;        if (!a || a < Math.abs(c)) { a=c; var s=p/4; }        else var s = p/(2*Math.PI) * Math.asin (c/a);        return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);      },      easeInOut: function(t,b,c,d,a,p){        if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);        if (!a || a < Math.abs(c)) { a=c; var s=p/4; }        else var s = p/(2*Math.PI) * Math.asin (c/a);        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;      }    },    Back: {//超過(guò)范圍的三次方緩動(dòng)（(s+1)*t^3 - s*t^2）；      easeIn: function(t,b,c,d,s){        if (s == undefined) s = 1.70158;        return c*(t/=d)*t*((s+1)*t - s) + b;      },      easeOut: function(t,b,c,d,s){        if (s == undefined) s = 1.70158;        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;      },      easeInOut: function(t,b,c,d,s){        if (s == undefined) s = 1.70158;         if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;      }    },    zfBounce: {//指數(shù)衰減的反彈緩動(dòng)。      easeIn: function(t,b,c,d){        return c - zhufengEffect.zfBounce.easeOut(d-t, 0, c, d) + b;      },      easeOut: function(t,b,c,d){        if ((t/=d) < (1/2.75)) {          return c*(7.5625*t*t) + b;        } else if (t < (2/2.75)) {          return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;        } else if (t < (2.5/2.75)) {          return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;        } else {          return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;        }      },      easeInOut: function(t,b,c,d){        if (t < d/2) return zhufengEffect.zfBounce.easeIn(t*2, 0, c, d) * .5 + b;        else return zhufengEffect.zfBounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;      }    }  };  //move:實(shí)現(xiàn)多方向的運(yùn)動(dòng)動(dòng)畫  /*    curEle:當(dāng)前要運(yùn)動(dòng)的元素    target:當(dāng)前動(dòng)畫的目標(biāo)位置,存儲(chǔ)的是每一個(gè)方向的目標(biāo)位置{left:xxx,top:xxx...}    duration:當(dāng)前動(dòng)畫的總時(shí)間  */  //effect支持以下的情況  /*      */  function move(curEle,target,duration,effect,callback){    //處理我們需要的動(dòng)畫效果    var tempEffect = myEffect.Linear;    if(typeof effect === "number"){      switch(effect){        case 0:          tempEffect = myEffect.Linear;          break;        case 1:          tempEffect = myEffect.Circ.easeInOut;          break;        case 2:          tempEffect = myEffect.Elastic.easeOut;          break;        case 3:          tempEffect = myEffect.Back.easeOut;          break;        case 4:          tempEffect = myEffect.Bounce.easeOut;          break;        case 5:          tempEffect = myEffect.Expo.easeIn;      }    }else if(effect instanceof Array){      tempEffect = effect.length>=2 ? myEffect[effect[0]][effect[1]] : myEffect[effect[0]]    }else if(typeof effect === "function"){      //我們的實(shí)際意義應(yīng)該是:effect是不傳遞值的，傳遞進(jìn)來(lái)的函數(shù)應(yīng)該是回調(diào)函數(shù)的值      callback = effect;    }    //在每一次執(zhí)行方法之前，首先把當(dāng)前元素之前正在運(yùn)行的動(dòng)畫結(jié)束掉    window.clearInterval(curEle.timer);    //根據(jù)target獲取每一個(gè)方向的起始值begin和總距離change    var begin = {},change = {};    for(var key in target){      if(target.hasOwnProperty(key)){        begin[key] = utils.css(curEle,key)        change[key] = target[key] - begin[key];      }    }    //實(shí)現(xiàn)多方向的運(yùn)動(dòng)動(dòng)畫    var time = 0;    curEle.timer = window.setInterval(function(){      time+=10;      //到達(dá)目標(biāo)：結(jié)束動(dòng)畫，讓當(dāng)前元素的樣式值等于目標(biāo)樣式值      if(time>=duration){        utils.css(curEle,target);        window.clearInterval(curEle.timer);        //在動(dòng)畫結(jié)束的時(shí)候，如果用戶把回調(diào)函數(shù)傳遞給我了，我就把用戶傳遞的回調(diào)函數(shù)執(zhí)行,不僅執(zhí)行還把this的指向改為當(dāng)前操作的元素        typeof callback === "function" ? callback.call(curEle) : null;        //或者callback && callback()        return;      }      //沒(méi)到達(dá)目標(biāo):分別獲取每一個(gè)方向的當(dāng)前位置，給當(dāng)前位置設(shè)置樣式即可。      for(var key in target){        if(target.hasOwnProperty(key)){          var curPos = tempEffect(time,begin[key],change[key],duration);          utils.css(curEle,key,curPos);        }      }    },10)  }  window.myAnimate = move;}()