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

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

方法介紹：

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

關于In、Out、Inout的說明：

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

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

如何應用：

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。

總結

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

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