从jQueryAPI文档中可以知道，jQuery自定义动画的函数.animate(properties[,duration][,easing][,complete])有四个参数：properties：一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)easing(可选)：要使用的过渡效果的名称，如："linear"或"swing"complete(可选)：在动画完成时执行的函数其中参数easing默认有两个效果："linear"和"swing"，如果需要更多效果就要插件支持了，jQueryEasingPlugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果，大家可以点击这里去看每一种easing的演示效果，下面详细介绍下其使用方法及每种easing的曲线图。jQueryeasing使用方法首先，项目中如果需要使用特殊的动画效果，则需要在引入jQuery之后引入jquery.easing.1.3.js<scripttype="text/javascript"src="http://code.jquery.com/jquery-...gt%3B<scripttype="text/javascript"src="http://gsgd.co.uk/sandbox/jque...gt%3B引入之后，easing参数可选的值就有以下32种：linearswingeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInExpoeaseOutExpoeaseInOutExpoeaseInSineeaseOutSineeaseInOutSineeaseInCirceaseOutCirceaseInOutCirceaseInElasticeaseOutElasticeaseInOutElasticeaseInBackeaseOutBackeaseInOutBackeaseInBounceeaseOutBounceeaseInOutBounce当然一般一个项目中不可能会用到这么多效果，为了减少代码冗余，必要时可以不用引入整个jquery.easing.1.3.js，我们可以只把我们需要的几种easing放入Javascript文件中，如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果，只需要下面的代码就可以了jQuery.extend(jQuery.easing,{easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){returnc*(7.5625*t*t)+b;}elseif(t<(2/2.75)){returnc*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}elseif(t<(2.5/2.75)){returnc*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{returnc*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},});使用jQuery自定义动画函数animate来指定easing效果，如自定义一种类弹簧效果的动画：$(myElement).animate({top:500,opacity:1},1000,'easeOutBounce');值得一提的是jQuery1.4版本中对animate()方法，easing的方法进行了扩展，支持为每个属性指定easing方法，详细请参考这里，如：$(myElement).animate({left:[500,'swing'],top:[200,'easeOutBounce']});也可以用另外一种写法：$(myElement).animate({left:500,top:200},{specialEasing:{left:'swing',top:'easeOutBounce'}});使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果，以下两种方法都可以：$(myElement).slideUp(1000,method,callback});$(myElement).slideUp({duration:1000,easing:method,complete:callback});

本文为H5EDU机构官方HTML5培训教程，主要介绍：JQuery强化教程—— jQuery Easing