官網:
jQuery API提供了簡單的動畫效果如淡入淡出以及自定義動畫效果,
一款jQuery動畫效果擴展增強插件jquery.easing.js,使用該插件可以實現直線勻速運功、變加速運動、緩沖等豐富的動畫效果。
jQuery Easing是一款比較老的jQuery插件,在很多網站都有應用,尤其是在一些頁面滾動、幻燈片切換等場景應用比較多。它非常小巧,且有多種動畫方案供選擇,使用簡單,而且免費。
該插件基于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原有的動畫效果上進行了擴展,所以使用時可以根據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.
參數complete:動畫結束后回調函數callback,可以自定義動畫結束后的調用函數。
2.使用jQuery自定義動畫函數animate()
jQuery Easing結合jQuery的自定義動畫函數animate()可以制作各種你想要的動畫效果,使用代碼如下:
$(element).animate({ height:500, width:600 },{ easing: 'easeInOutQuad', duration: 500, complete: callback }); 上面的代碼定義了一個緩沖效果的動畫,我們可以根據項目需要,結合jQuery Easing制作各種動畫效果。
新聞熱點
疑難解答