欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論