快捷導(dǎo)航

jQuery封裝animate.css的實(shí)例

更新時(shí)間：2018年01月04日 09:57:15 作者：貓老板的豆

下面小編就為大家分享一篇jQuery封裝animate.css的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

animate.css是一個(gè)有趣的，跨瀏覽器的css3動(dòng)畫庫。

一、首先引入animate css文件

<link rel="stylesheet" href="animate.css" rel="external nofollow" >

二、給指定的元素加上指定的動(dòng)畫樣式名

<div id="box" class="animated bounce"></div>

這里包括兩個(gè)class名，第一個(gè)是基本的，必須添加的樣式名，任何想實(shí)現(xiàn)的元素都得添加這個(gè)。第二個(gè)是指定的動(dòng)畫樣式名。

三、如果說想給某個(gè)元素動(dòng)態(tài)添加動(dòng)畫樣式，可以通過jquery來實(shí)現(xiàn)

給動(dòng)畫對(duì)象添加類，然后監(jiān)聽動(dòng)畫結(jié)束事件，一旦監(jiān)聽到動(dòng)畫結(jié)束，立即移除前面添加的類。

官方給出了jQuery的封裝：

//擴(kuò)展$對(duì)象，添加方法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的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JSON格式化輸出
本文主要是記錄一個(gè)項(xiàng)目中用到的對(duì)輸出的json進(jìn)行格式化的小技巧，也是看到一位朋友分享的，這里mark一下，有需要的小伙伴也可以參考下。
2014-11-11
jQuery實(shí)現(xiàn)樹形員工信息表
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)樹形員工信息表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
jQuery CSS3自定義美化Checkbox實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery CSS3自定義美化Checkbox實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05
Bootstrap框架建立樹形菜單(Tree)的實(shí)例代碼
這篇文章主要介紹了在Bootstrap框架下怎么去建立一個(gè)樹形菜單，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2017-10-10
DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼
接觸jquery 2,3個(gè)月了，一直都未動(dòng)手寫過插件。正好最近比較閑，就打算把一直看不順眼的項(xiàng)目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個(gè)控件，copy,past的代碼太多）。
2010-12-12
jquery獲取img的src值實(shí)例介紹
在本篇文章里小編給大家分享了關(guān)于jquery獲取img的src值實(shí)例介紹和相關(guān)內(nèi)容，有需要的朋友們學(xué)習(xí)下。
2019-01-01
Jquery獲得控件值的三種方法總結(jié)
本篇文章主要是對(duì)Jquery獲得控件值的三種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果，根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能，需要的朋友可以參考下
2015-12-12
jQuery學(xué)習(xí)筆記之入門
本文主要對(duì)jQuery的基礎(chǔ)知識(shí)進(jìn)行介紹，非常適合剛開始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來看下吧
2016-12-12
編寫高效jQuery代碼的4個(gè)原則和5個(gè)技巧
有了JQuery對(duì)JS的整合和封裝，它讓頁面操作更加的隨心所欲，所以只有遵循良好的規(guī)范才會(huì)讓代碼更高效，更健壯。以下是我對(duì)如何高效操作JQuery的一些拙見，望指正！
2014-04-04