網(wǎng)站建設中前端人員利用jQuery實現(xiàn)動畫再簡單不過了，只是要實現(xiàn)更酷的效果還需要插件來幫忙，easing就是一款幫助jQuery實現(xiàn)緩動動畫的插件，經(jīng)過試用，效果很不錯！

下載該插件：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/

我們可以通過效果演示站點查看具體運行效果,也可以通過坐標標注的直觀效果來了解其運行具體軌跡。例如下圖：

?

常用參數(shù)：

• 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：指數(shù)曲線緩動
• Circ：圓形曲線的緩動
• Elastic：指數(shù)衰減的正弦曲線緩動
• Back：超過范圍的三次方緩動
• Bounce：指數(shù)衰減的反彈緩動

關于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自定義動畫函數(shù).animate()

jQuery 的.animate()是自定義動畫的函數(shù)，如上面所說，有四個參數(shù)，而其中easing的參數(shù)就是我們進行動畫效果擴展的方法名稱（如easeOutExpo）。網(wǎng)站建設中最簡單的使用方法是：

?

$(myElement).animate({?

?

????left:?500,?

?

????top:?500?

?

},?'easeOutExpo');?

?

James?Padolsey對jQuery1.3.2的animate函數(shù)進行了修改擴展：?

?

?

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中這種方式已經(jīng)被引入，所以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'?

?

}?

?

});??

轉載于:https://www.cnblogs.com/goody9807/p/4338431.html

總結

以上是生活随笔為你收集整理的网站建设中前端常用的jQuery+easing缓动的动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。