网站建设中前端常用的jQuery+easing缓动的动画

网站建设中前端人员利用jQuery实现动画再简单不过了，只是要实现更酷的效果还需要插件来帮忙，easing就是一款帮助jQuery实现缓动动画的插件，经过试用，效果很不错！

下载该插件：jquery.easing.1.3.js　jquery.easing.compatibility.js

该插件美化排版后是130行左右，压缩后更小。这个插件弥补了jquery里面的动画效果的不足，是其动画效果更加强悍。

X轴表示时间，Y轴表示的是动画效果的变化。查看这些曲线变化，更利于掌握这个插件的效果。

插件支持站：http://gsgd.co.uk/sandbox/jquery/easing/

效果演示站点：http://james.padolsey.com/demos/jquery/easing/

我们可以通过效果演示站点查看具体运行效果,也可以通过坐标标注的直观效果来了解其运行具体轨迹。例如下图：

常用参数：

• linear
• swing
• jswing
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

方法介绍：

• def：默认方式设置
• swing：默认方式加载
• Quad：二次方缓动(t)
• Cubic：三次方缓动
• Quart：四次方缓动
• Quint：五次方缓动
• Sine：正弦曲线缓动
• Expo：指数曲线缓动
• Circ：圆形曲线的缓动
• Elastic：指数衰减的正弦曲线缓动
• Back：超过范围的三次方缓动
• Bounce：指数衰减的反弹缓动

关于In、Out、Inout的说明：

• easeIn：加速度缓动；
• easeOut：减速度缓动；
• easeInOut：先加速度至50%，再减速度完成动画。

如何应用：

slideUp|slideDown|slideToggle|fadeIn|fadeOut|fadeToggle

$(element).slideUp(duration,easing,[callback]);

fadeTo

$(element).fadeTo(duration,opacity,easing,[callback]);

animate

$(element).animate({properties},duration,easing,callback);

jQuery1.4+版本更可以：

$(element).animate({left:[100,‘swing‘],top:[100,‘easeOutBounce‘]});

或者

jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: ‘swing‘,top:‘easeOutBounce‘}});

具体可参阅jquery1.4+的API。

简单实例：

1. <script type="text/javascript" language="javascript" src="JS/jquery.js"></script> 
2. <script type="text/javascript" language="javascript" src="JS/easing.js"></script> 
3. <script language="javascript" type="text/javascript"> 
4. $(document).ready(function(){ 
5. $("#xxxx").stop(true,false).animate({left : -320},1500,‘easeOutElastic‘); 
6. }) 
7. </script> 

开始使用jQuery Easing

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

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

方法2、jQuery默认动画

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

如以下代码：

1. $(element).slideUp({ 
2.  
3.     duration: 1000,  
4.  
5.     easing: method,  
6.  
7.     complete: callback}); 

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

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

1. $(myElement).animate({ 
2.  
3.     left: 500, 
4.  
5.     top: 500 
6.  
7. }, ‘easeOutExpo‘); 
8.  
9. James Padolsey对jQuery1.3.2的animate函数进行了修改扩展： 
10.  
11.  
12. jQuery.fn.animate = (function(_anim){ 
13.  
14. var jQEasing = jQuery.easing; 
15.  
16. return function(prop, duration, easing, callback) { 
17.  
18. var props = {}, optall, i, hasEaser = false; 
19.  
20. for ( i in prop ) { 
21.  
22. if ( jQuery.isArray(prop[i]) ) { 
23.  
24. hasEaser = true; 
25.  
26. props[i] = prop[i][1]; 
27.  
28. prop[i] = prop[i][0]; 
29.  
30. } 
31.  
32. } 
33.  
34. opt = jQuery.speed(duration, easing, callback); 
35.  
36. if (hasEaser) { 
37.  
38. opt.step = (function(_step){ 
39.  
40. return function(now, fx) { 
41.  
42. var end = fx.end, easeFn; 
43.  
44. if ( easeFn = props[fx.prop] ) { 
45.  
46. fx.now = jQEasing[easeFn]( now/end, now, 0, end, end ); 
47.  
48. } 
49.  
50. _step && _step.call( fx.elem, fx.now, fx ); 
51.  
52. }; 
53.  
54. })(opt.step); 
55.  
56. } 
57.  
58. optopt.complete = opt.old || callback || jQuery.isFunction(easing) && easing; 
59.  
60. return _anim.call( this, prop, opt ); 
61.  
62. }; 
63.  
64. })(jQuery.fn.animate);  

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

1. $(myElement).animate({ 
2.  
3.     left: 500, 
4.  
5.     top: [500, ‘easeOutBounce‘]  
6.  
7. }, 1000,‘swing‘); 

jQuery1.4 的animate()+Easing

1. jQuery(myElement).animate({ 
2.  
3. left: [500, ‘swing‘], 
4.  
5. top: [200, ‘easeOutBounce‘] 
6.  
7. }); 
8.  
9. 或者： 
10.  
11. jQuery(myElement).animate({ 
12.  
13. left: 500, 
14.  
15. top: 200 
16.  
17. }, { 
18.  
19. specialEasing: { 
20.  
21. left: ‘swing‘, 
22.  
23. top: ‘easeOutBounce‘ 
24.  
25. } 
26.  
27. });