網站建設中前端人員利用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。
簡單實例：
- <script type="text/javascript" language="javascript" src="JS/jquery.js"></script>
- <script type="text/javascript" language="javascript" src="JS/easing.js"></script>
- <script language="javascript" type="text/javascript">
- $(document).ready(function(){
- $("#xxxx").stop(true,false).animate({left : -320},1500,'easeOutElastic');
- })
- </script>
開始使用jQuery Easing
方法1、設置jQuery默認動畫效果
- jQuery.easing.def = “method”;//如：easeOutExpo
方法2、jQuery默認動畫
支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery內置的動畫效果
如以下代碼：
- $(element).slideUp({
- duration: 1000,
- easing: method,
- complete: callback});
方法3、使用jQuery自定義動畫函數.animate()
jQuery 的.animate()是自定義動畫的函數，如上面所說，有四個參數，而其中easing的參數就是我們進行動畫效果擴展的方法名稱（如easeOutExpo）。網站建設中最簡單的使用方法是：
- $(myElement).animate({
- left: 500,
- top: 500
- }, 'easeOutExpo');
- James Padolsey對jQuery1.3.2的animate函數進行了修改擴展：
- jQuery.fn.animate = (function(_anim){
- var jQEasing = jQuery.easing;
- return function(prop, duration, easing, callback) {
- var props = {}, optall, i, hasEaser = false;
- for ( i in prop ) {
- if ( jQuery.isArray(prop[i]) ) {
- hasEaser = true;
- props[i] = prop[i][1];
- prop[i] = prop[i][0];
- }
- }
- opt = jQuery.speed(duration, easing, callback);
- if (hasEaser) {
- opt.step = (function(_step){
- return function(now, fx) {
- var end = fx.end, easeFn;
- if ( easeFn = props[fx.prop] ) {
- fx.now = jQEasing[easeFn]( now/end, now, 0, end, end );
- }
- _step && _step.call( fx.elem, fx.now, fx );
- };
- })(opt.step);
- }
- optopt.complete = opt.old || callback || jQuery.isFunction(easing) && easing;
- return _anim.call( this, prop, opt );
- };
- })(jQuery.fn.animate);
在jQuery1.4中這種方式已經被引入，所以jQuery1.4中不需要添加jQuery的animate()擴展，我們就可以使用下面的更加方便代碼啦：
- $(myElement).animate({
- left: 500,
- top: [500, 'easeOutBounce']
- }, 1000,'swing');
jQuery1.4 的animate()+Easing
- jQuery(myElement).animate({
- left: [500, 'swing'],
- top: [200, 'easeOutBounce']
- });
- 或者：
- jQuery(myElement).animate({
- left: 500,
- top: 200
- }, {
- specialEasing: {
- left: 'swing',
- top: 'easeOutBounce'
- }
- });