這次帶給大家如何用jQuery封裝animate.css程式碼，用jQuery封裝animate.css程式碼的注意事項有哪些，下面就是實戰案例，一起來看一下。
animate.css是一個有趣的，跨瀏覽器的css3動畫庫。
一、先引入animate css檔案
#<link rel="stylesheet" href="animate.css" rel="external nofollow" >
二、為指定的元素加上指定的動畫樣式名
<p id="box" class="animated bounce"></p>
這裡包含兩個class名，第一個是基本的，必須新增的樣式名，任何想實現的元素都得加這個。第二個是指定的動畫樣式名。
三、如果說想為某個元素動態添加動畫樣式，可以透過jquery來實現
給動畫物件新增類，然後監聽動畫結束事件，一旦監聽到動畫結束，立即移除前面新增的類別。
官方給了jQuery的封裝：
//扩展$对象，添加方法animateCss
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
//调用示例：
$('#box').animateCss('bounce');我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何用jQuery封裝animate.css程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
