使用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');

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

詳解如何實現vuex（詳細教學）

在vue中如何實作微信分享朋友圈,傳送朋友

vue.js如何建立大型單頁應用程式

#javascript中的隱含呼叫的使用方法？

在webpack中使用devtool詳解

#在React元件中refs的使用方法

在vue-cli專案中proxyTable跨域問題

express建置查詢伺服器

使用js自訂trim函數刪除兩端空格

JavaScript運作原理

以上是使用jQuery封裝animate.css（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！