jQuery封裝animate.css的實例
更新時間：2018年01月04日 09:57:15 作者：貓老板的豆
下面小編就為大家分享一篇jQuery封裝animate.css的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
animate.css是一個有趣的，跨瀏覽器的css3動畫庫。
一、首先引入animate css文件
<link rel="stylesheet" href="animate.css" rel="external nofollow" >
二、給指定的元素加上指定的動畫樣式名
<div id="box" class="animated bounce"></div>
這里包括兩個class名，第一個是基本的，必須添加的樣式名，任何想實現(xiàn)的元素都得添加這個。第二個是指定的動畫樣式名。
三、如果說想給某個元素動態(tài)添加動畫樣式，可以通過jquery來實現(xiàn)
給動畫對象添加類，然后監(jiān)聽動畫結(jié)束事件，一旦監(jiān)聽到動畫結(jié)束，立即移除前面添加的類。
官方給出了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);
});
}
});
//調(diào)用示例：
$('#box').animateCss('bounce');
以上這篇jQuery封裝animate.css的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JQuery animate動畫應用示例
- jquery animate動畫持續(xù)運動的實例
- jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})不被Firefox支持的問題
- jQuery animate()實現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
- 淺談原生JS實現(xiàn)jQuery的animate()動畫示例
- jQuery實現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）
- jQuery中animate的幾種用法與注意事項
- jQuery使用animate實現(xiàn)ul列表項相互飄動效果示例
- 利用jQuery的動畫函數(shù)animate實現(xiàn)豌豆發(fā)射效果
- 原生js實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例
- 詳解jQuery的animate動畫方法及動畫排隊問題解決
相關(guān)文章
鋒利的jQuery 要點歸納（二） jQuery中的DOM操作（下）
鋒利的jQuery 要點歸納（二） jQuery中的DOM操作（下）2010-03-03
這篇文章主要介紹了jQuery簡單注冊和禁用全局事件的方法,結(jié)合實例形式分析了jQuery中ajaxStart與ajaxStop方法的使用技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了用隊列模擬jquery的動畫算法,實例分析了用隊列模擬jquery的動畫算法的原理與實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery移動端圖片上傳組件，使用File API+canvas 客戶端壓縮圖片，并實現(xiàn)文件上傳服務(wù)端，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了jQuery簡單入門示例之用戶校驗demo示例,分析了基于jQuery的簡單用戶校驗功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-07-07
本文主要介紹利用jquery實現(xiàn)圖片列表鼠標移入微動的實例。代碼清晰，需要的朋友來看下吧2016-12-12
這個東西也是隨手總結(jié)出來的，引用了一些js框架jquery的方法。2010-02-02
這篇文章主要介紹了jQuery-each()方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
JQuery事件e參數(shù)的方法preventDefault()取消默認行為
JQuery事件的e參數(shù)的方法preventDefault()可以取消對象的默認行為，下有個不錯的示例，大家可以參考下，希望對大家有所幫助2013-09-09
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。這篇文章主要介紹了基于jQuery的ajax方法封裝的相關(guān)資料,需要的朋友可以參考下2016-07-07