亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2018年01月04日 09:57:15   作者：貓老板的豆  
下面小編就為大家分享一篇jQuery封裝animate.css的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

一、首先引入animate css文件

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

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

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

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

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

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

官方給出了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)論