jQuery API提供了簡單的動畫效果如淡入淡出以及自定義動畫效果，而今天我給大家分享的是一款jQuery動畫效果擴展增強插件jquery.easing.js，使用該插件可以實現直線勻速運功、變加速運動、緩沖等豐富的動畫效果。

jQuery Easing是一款比較老的jQuery插件，在很多網站都有應用，尤其是在一些頁面滾動、幻燈片切換等場景應用比較多。它非常小巧，且有多種動畫方案供選擇，使用簡單，而且免費。

查看演示DEMO 下載源碼

引入Easing js文件

該插件基于jQuery，所以需要同時引入jQuery庫文件和Easing js文件。

<script?type="text/javascript"?src="js/jquery.min.js"></script>?
<script?type="text/javascript"?src="js/jquery.easing.min.js"></script>?

使用jQuery Easing

jQuery Easing是在jQuery原有的動畫效果上進行了擴展，所以使用時可以根據jQuery原有的動畫函數進行擴展。

1.jQuery默認動畫

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery內置的動畫效果，使用代碼如下：

$(element).slideUp({?
????duration:?1000,??
????easing:?method,??
????complete:?callback?
});?

參數duration：定義動畫運動時間，毫秒，其實就是速度，時間越短，運動速度越快。

參數easing：指定動畫效果，Easing js提供多種動畫效果，有勻速運動、變加速運動、緩沖波動效果，它們 是：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. 各動畫實際效果請參照演示demo。

參數complete：動畫結束后回調函數callback，可以自定義動畫結束后的調用函數。

2.使用jQuery自定義動畫函數animate()

jQuery Easing結合jQuery的自定義動畫函數animate()可以制作各種你想要的動畫效果，使用代碼如下：

$(element).animate({?
????height:500,?
????width:600?
????},{?
????easing:?'easeInOutQuad',?
????duration:?500,?
????complete:?callback?
});?

上面的代碼定義了一個緩沖效果的動畫，我們可以根據項目需要，結合jQuery Easing制作各種動畫效果。來源于helloweba.com

轉載于:https://www.cnblogs.com/Watcher/p/3685748.html

總結

以上是生活随笔為你收集整理的jquery.easing.js(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

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