jQuery實(shí)現(xiàn)動畫再簡單不過了，只是要實(shí)現(xiàn)更酷的效果還需要插件來幫忙，easing就是一款幫助jQuery實(shí)現(xiàn)緩動動畫的插件，經(jīng)過試用，效果很不錯，記錄一下使用方法吧！

下載該插件：jquery.easing.1.3.js　jquery.easing.compatibility.js

方法介紹：

• def：默認(rèn)方式設(shè)置
• swing：默認(rèn)方式加載
• Quad：二次方緩動(t)
• Cubic：三次方緩動
• Quart：四次方緩動
• Quint：五次方緩動
• Sine：正弦曲線緩動
• Expo：指數(shù)曲線緩動
• Circ：圓形曲線的緩動
• Elastic：指數(shù)衰減的正弦曲線緩動
• Back：超過范圍的三次方緩動
• Bounce：指數(shù)衰減的反彈緩動

關(guān)于In、Out、Inout的說明：

• easeIn：加速度緩動；
• easeOut：減速度緩動；
• easeInOut：先加速度至50%，再減速度完成動畫。

緩動方式的翻譯來自：JavaScript Tween算法及緩動效果

如何應(yīng)用：

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。

總結(jié)

以上是生活随笔為你收集整理的jQuery+easing缓动的动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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