jQuery animate 動畫庫已經成為了Web設計和開發中最為流行和廣為應用的JavaScript庫之一。而隨著Web頁面設計越來越高端化和豐富化，animate動畫效果的質量和多樣性也變得尤為重要。

jQuery animate庫已經內建了若干種常用的動畫效果：fadeIn、fadeOut、slideUp、slideDown等等，這些常規效果已經可以解決大部分的應用需要。

但是，在某些開發應用中，常規的jQuery animate效果難以滿足實際的設計需求。這時候，我們就需要擴展jQuery animate庫，添加自定義的動畫效果。

$.fn.extend ({
animateCss: function(animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});

上面的代碼是一個自定義的animate擴展函數 animateCss，它接收一個CSS3 animation Name參數，并用addClass將animate.css文件中指定的 animation效果屬性加入到動畫的對象中，一旦動畫完成，就用removeClass清除屬性。

通過這個增加自定義animate擴展函數，我們可以輕松的為一個普通的HTML元素添加諸如彈跳、旋轉、翻轉等炫酷的動畫效果，讓網站更豐富有趣。