jQuery自定义动画函数实例详解（附demo源码）

本文实例讲述了jQuery自定义动画函数完整实现技巧。分享给大家供大家参考，具体如下：
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/
具体代码如下：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自定义动画DEMO</title><script src="jquery-1.4.4.js"></script><script src="jquery.easing.1.3.js"></script><script>var Tween = { Linear:function （start,alter,curTime,dur） {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动 Quad:{//二次方缓动 easeIn:function （start,alter,curTime,dur） {return start+Math.pow（curTime/dur,2）*alter; }, easeOut:function （start,alter,curTime,dur） {var progress =curTime/dur;return start-（Math.pow（progress,2）-2*progress）*alter; }, easeInOut:function （start,alter,curTime,dur） {var progress =curTime/dur*2;return （progress<1?Math.pow（progress,2）:-（（--progress）*（progress-2） - 1））*alter/2+start; } }, Cubic:{//三次方缓动 easeIn:function （start,alter,curTime,dur） {return start+Math.pow（curTime/dur,3）*alter; }, easeOut:function （start,alter,curTime,dur） {var progress =curTime/dur;return start-（Math.pow（progress,3）-Math.pow（progress,2）+1）*alter; }, easeInOut:function （start,alter,curTime,dur） {var progress =curTime/dur*2;return （progress<1?Math.pow（progress,3）:（（progress-=2）*Math.pow（progress,2） + 2））*alter/2+start; } }, Quart:{//四次方缓动 easeIn:function （start,alter,curTime,dur） {return start+Math.pow（curTime/dur,4）*alter; }, easeOut:function （start,alter,curTime,dur） {var progress =curTime/dur;return start-（Math.pow（progress,4）-Math.pow（progress,3）-1）*alter; }, easeInOut:function （start,alter,curTime,dur） {var progress =curTime/dur*2;return （progress<1?Math.pow（progress,4）:-（（progress-=2）*Math.pow（progress,3） - 2））*alter/2+start; } }, Quint:{//五次方缓动 easeIn:function （start,alter,curTime,dur） {return start+Math.pow（curTime/dur,5）*alter; }, easeOut:function （start,alter,curTime,dur） {var progress =curTime/dur;return start-（Math.pow（progress,5）-Math.pow（progress,4）+1）*alter; }, easeInOut:function （start,alter,curTime,dur） {var progress =curTime/dur*2;return （progress<1?Math.pow（progress,5）:（（progress-=2）*Math.pow（progress,4） +2））*alter/2+start; } }, Sine :{//正弦曲线缓动 easeIn:function （start,alter,curTime,dur） {return start-（Math.cos（curTime/dur*Math.PI/2）-1）*alter; }, easeOut:function （start,alter,curTime,dur） {return start+Math.sin（curTime/dur*Math.PI/2）*alter; }, easeInOut:function （start,alter,curTime,dur） {return start-（Math.cos（curTime/dur*Math.PI/2）-1）*alter/2; } }, Expo: {//指数曲线缓动 easeIn:function （start,alter,curTime,dur） {return curTime?（start+alter*Math.pow（2,10*（curTime/dur-1）））:start; }, easeOut:function （start,alter,curTime,dur） {return （curTime==dur）?（start+alter）:（start-（Math.pow（2,-10*curTime/dur）+1）*alter）; }, easeInOut:function （start,alter,curTime,dur） {if （！curTime） {return start;}if （curTime==dur） {return start+alter;}var progress =curTime/dur*2;if （progress < 1） {return alter/2*Math.pow（2,10* （progress-1））+start;} else {return alter/2* （-Math.pow（2, -10*--progress） + 2） +start;} } }, Circ :{//圆形曲线缓动 easeIn:function （start,alter,curTime,dur） {return start-alter*Math.sqrt（-Math.pow（curTime/dur,2））; }, easeOut:function （start,alter,curTime,dur） {return start+alter*Math.sqrt（1-Math.pow（curTime/dur-1））; }, easeInOut:function （start,alter,curTime,dur） {var progress =curTime/dur*2;return （progress<1?1-Math.sqrt（1-Math.pow（progress,2））:（Math.sqrt（1 - Math.pow（progress-2,2）） + 1））*alter/2+start; } }, Elastic: {//指数衰减的正弦曲线缓动 easeIn:function （start,alter,curTime,dur,extent,cycle） {if （！curTime） {return start;}if （（curTime==dur）==1） {return start+alter;}if （！cycle） {cycle=dur*0.3;}var s;if （！extent || extent< Math.abs（alter）） {extent=alter;s = cycle/4;} else {s=cycle/（Math.PI*2）*Math.asin（alter/extent）;}return start-extent*Math.pow（2,10*（curTime/dur-1）） * Math.sin（（curTime-dur-s）*（2*Math.PI）/cycle）; }, easeOut:function （start,alter,curTime,dur,extent,cycle） {if （！curTime） {return start;}if （curTime==dur） {return start+alter;}if （！cycle） {cycle=dur*0.3;}var s;if （！extent || extent< Math.abs（alter）） {extent=alter;s =cycle/4;} else {s=cycle/（Math.PI*2）*Math.asin（alter/extent）;}return start+alter+extent*Math.pow（2,-curTime/dur*10）*Math.sin（（curTime-s）*（2*Math.PI）/cycle）; }, easeInOut:function （start,alter,curTime,dur,extent,cycle） {if （！curTime） {return start;}if （curTime==dur） {return start+alter;}if （！cycle） {cycle=dur*0.45;}var s;if （！extent || extent< Math.abs（alter）） {extent=alter;s =cycle/4;} else {s=cycle/（Math.PI*2）*Math.asin（alter/extent）;}var progress = curTime/dur*2;if （progress<1） {return start-0.5*extent*Math.pow（2,10*（progress-=1））*Math.sin（ （progress*dur-s）*（2*Math.PI）/cycle）;} else {return start+alter+0.5*extent*Math.pow（2,-10*（progress-=1）） * Math.sin（ （progress*dur-s）*（2*Math.PI）/cycle）;} } }, Back:{ easeIn: function （start,alter,curTime,dur,s）{if （typeof s == "undefined"） {s = 1.70158;}return start+alter*（curTime/=dur）*curTime*（（s+1）*curTime - s）; }, easeOut: function （start,alter,curTime,dur,s） {if （typeof s == "undefined"） {s = 1.70158;}return start+alter*（（curTime=curTime/dur-1）*curTime*（（s+1）*curTime + s） + 1）; }, easeInOut: function （start,alter,curTime,dur,s）{if （typeof s == "undefined"） {s = 1.70158;}if （（curTime/=dur/2） < 1） {return start+alter/2*（Math.pow（curTime,2）*（（（s*=（1.525））+1）*curTime- s））;}return start+alter/2*（（curTime-=2）*curTime*（（（s*=（1.525））+1）*curTime+ s）+2）; } }, Bounce:{ easeIn: function（start,alter,curTime,dur）{return start+alter-Tween.Bounce.easeOut（0,alter,dur-curTime,dur）; }, easeOut: function（start,alter,curTime,dur）{if （（curTime/=dur） < （1/2.75）） {return alter*（7.5625*Math.pow（curTime,2））+start;} else if （curTime < （2/2.75）） {return alter*（7.5625*（curTime-=（1.5/2.75））*curTime + .75）+start;} else if （curTime< （2.5/2.75）） {return alter*（7.5625*（curTime-=（2.25/2.75））*curTime + .9375）+start;} else {return alter*（7.5625*（curTime-=（2.625/2.75））*curTime + .984375）+start;} }, easeInOut: function （start,alter,curTime,dur）{if （curTime< dur/2） {return Tween.Bounce.easeIn（0,alter,curTime*2,dur） *0.5+start;} else {return Tween.Bounce.easeOut（0,alter,curTime*2-dur,dur） *0.5 + alter*0.5 +start;} }, easeOutBounce: function （b, c, t, 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;} } }, //start,alter,curTime,dur easeOutBounce: function （b, c, t, 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; } }};jQuery（function（$）{ //两种动画方式对比，在w3c浏览器中是一致的，在IE中有差异（即使用同算法） $（"#start"）.click（function（）{ //自定义动画函数 animate（Fid（"song"）, {opacity:0.3, left:400}, 2000, Tween.easeOutBounce）; //jq动画效果 $（"#jian"）.animate（ {opacity:0.3, left:400}, 2000, "easeOutBounce"） }） /* 参数说明 o:要动画的对象 end:元素最终的样式 dur:动画持续多长时 fx:效果插件 */ function animate（o ,end, dur, fx） { var curTime=0; var start = {};//元素的初始样式 var alter = {};//元素的增量样式 var t=setInterval（function （） {if （curTime>=dur） clearTimeout（t）;for （var i in end） {if（！ （i in start））//注意加括号{ //不能用 parseInt.有透明度时会出问题 start[i] = parseFloat（getStyle（o, i））;}if（！ （i in alter））{ alter[i] = end[i] - start[i];}var val = fx（start[i],alter[i],curTime,dur）;if（i == "opacity"）{ /** o.style.filter, o.style.opacity 火狐下都为空字符串 只能用 o.style.opacity 检测注意：ietester下无法测试透明度 */ if（typeof o.style.opacity == "undefined"） { o.style.filter = "alpha（opacity="+val*100+"）";}else{ o.style[i] = val; }}else{ o.style[i] = val+"px"; }}curTime+=13; //jquery 中也为 13 },13）; } /** 获取元素样式 处理透明度、元素浮动样式的获取 ，结果带有单位 */ function getStyle（elem, name） { var nameValue = null; if （document.defaultView） {var style = document.defaultView.getComputedStyle（elem, null）;nameValue = name in style ? style[name] : style.getPropertyValue（name）; } else {var style = elem.style,curStyle = elem.currentStyle;//透明度 from youaif （name == "opacity"） {if （/alpha（opacity=（.*））/i.test（curStyle.filter）） { var opacity = parseFloat（RegExp.$1）; return opacity ? opacity / 100 : 0;}return 1;}if （name == "float"） {name = "styleFloat";}var ret = curStyle[name] || curStyle[camelize（name）];//单位转换 from jquryif （！/^-?d+（?:px）?$/i.test（ret） && /^-?d/.test（ret）） {var left = style.left,rtStyle = elem.runtimeStyle,rsLeft = rtStyle.left;rtStyle.left = curStyle.left;style.left = ret || 0;ret = style.pixelLeft + "px";style.left = left;rtStyle.left = rsLeft;}nameValue = ret; } return nameValue === "auto" ? "0px" : nameValue; } function camelize（s） {//将CSS属性名转换成驼峰式 return s.replace（/-[a-z]/gi,function （c） {return c.charAt（1）.toUpperCase（）; }）; } function Fid（id） { return document.getElementById（id）;}}）</script></head><style>.main{ border:1px solid blue; height:350px;}.pos {position:absolute; left:0px;top:50px; border:5px solid red; background:green;width:100px; height:100px;}</style><body><div class="main"> <div id="song" class="pos" style="display:block;">song</div> <div id="jian" class="pos" style="top:200px;">jian</div></div><button id="start">start</button></body></html>
完整实例代码点击此处本站下载。
希望本文所述对大家JavaScript程序设计有所帮助。