学步园

【from】http://www.js8.in/451.html

在jQuery文档中我们可以看到，自定义动画函数.animate()有四个参数：

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合<br /> duration (String,Number) : (可选) 三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)<br /> easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.<br /> callback (Function) : (可选) 在动画完成时执行的函数  

其中参数easing默认有两个效果：“linear”和“swing”，

如果需要更多就要插件支持了：jQuery Easing Plugin.

      在jQuery Easing中设置了easeInElastic、easeOutElastic、easeInOutElastic等共31中不同的效果，应该可以满足大家的需要啦，如果你还想研究下动画移动的效果图，还可以看一下这篇文章不仅有动画演示，还有图片分析。

要使用jQuery Easing扩展，首先我们要在jQuery之后，引入jQuery Easing Plugin文件，如以下代码:

<script type="text/javascript" src="http://www.2fool.cn/mywork/jquery_easing/easing.js">

jQuery Easing简单教程

方法1、设置jQuery默认动画效果

jQuery.easing.def = “method”;//如：easeOutExpo

方法2、jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果

如以下代码：

$(element).slideUp({<br /> duration: 1000,<br /> easing: method,<br /> complete: callback});

方法3、使用jQuery自定义动画函数.animate()

jQuery 的.animate()是自定义动画的函数，如上面所说，有四个参数，而其中easing的参数就是我们进行动画效果扩展的方法名称（如easeOutExpo）。最简单的使用方法是：

$(myElement).animate({<br /> left: 500,<br /> top: 500<br /> }, 'easeOutExpo');

上面的代码就是实现的动画之后以easeOutExpo的方法来进行缓冲（easing），这是animate() easing的基本用法（点击查看此效果演示DEMO）

James Padolsey对jQuery1.3.2的animate函数进行了修改扩展：

jQuery.fn.animate = (function(_anim){<br /> var jQEasing = jQuery.easing;<br /> return function(prop, duration, easing, callback) {<br /> var props = {}, optall, i, hasEaser = false;<br /> for ( i in prop ) {<br /> if ( jQuery.isArray(prop[i]) ) {<br /> hasEaser = true;<br /> props[i] = prop[i][1];<br /> prop[i] = prop[i][0];<br /> }<br /> }<br /> opt = jQuery.speed(duration, easing, callback);<br /> if (hasEaser) {<br /> opt.step = (function(_step){<br /> return function(now, fx) {<br /> var end = fx.end, easeFn;<br /> if ( easeFn = props[fx.prop] ) {<br /> fx.now = jQEasing[easeFn]( now/end, now, 0, end, end );<br /> }<br /> _step && _step.call( fx.elem, fx.now, fx );<br /> };<br /> })(opt.step);<br /> }<br /> opt.complete = opt.old || callback || jQuery.isFunction(easing) && easing;<br /> return _anim.call( this, prop, opt );<br /> };<br /> })(jQuery.fn.animate);

在jQuery1.4中这种方式已经被引入，所以jQuery1.4中不需要添加jQuery的animate()扩展，我们就可以使用下面的更加方便代码啦：

$(myElement).animate({<br /> left: 500,<br /> top: [500, 'easeOutBounce']<br /> }, 1000,'swing');

上面的代码的效果是，总体上来使用swing的方法来缓冲，而top的时候采用easeOutBounce的方法来缓冲。（点击查看此效果演示DEMO）

jQuery1.4 的animate()+Easing

值得一提的是jQuery 1.4版本中对animate()方法，easing的方法进行了扩展，英语不错的童鞋，可以点击此处

jQuery(myElement).animate({<br /> left: [500, 'swing'],<br /> top: [200, 'easeOutBounce']<br /> });

或者：

jQuery(myElement).animate({<br /> left: 500,<br /> top: 200<br /> }, {<br /> specialEasing: {<br /> left: 'swing',<br /> top: 'easeOutBounce'<br /> }<br /> });

 相关文章：

1.How to Make a Smooth Animated Menu with jQuery

2.Easing in jQuery 1.4a2