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名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

三、如果说想给某个元素动态添加动画样式，可以通过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');

以上这篇jQuery封装animate.css的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JSON格式化输出
本文主要是记录一个项目中用到的对输出的json进行格式化的小技巧，也是看到一位朋友分享的，这里mark一下，有需要的小伙伴也可以参考下。
2014-11-11
jQuery实现树形员工信息表
这篇文章主要为大家详细介绍了jQuery实现树形员工信息表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
jQuery CSS3自定义美化Checkbox实现代码
这篇文章主要为大家详细介绍了jQuery CSS3自定义美化Checkbox实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
Bootstrap框架建立树形菜单(Tree)的实例代码
这篇文章主要介绍了在Bootstrap框架下怎么去建立一个树形菜单，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
2017-10-10
DIY jquery plugin - tabs标签切换实现代码
接触jquery 2,3个月了，一直都未动手写过插件。正好最近比较闲，就打算把一直看不顺眼的项目中现有的tab改造一番（现有的tab未能做成一个控件，copy,past的代码太多）。
2010-12-12
jquery获取img的src值实例介绍
在本篇文章里小编给大家分享了关于jquery获取img的src值实例介绍和相关内容，有需要的朋友们学习下。
2019-01-01
Jquery获得控件值的三种方法总结
本篇文章主要是对Jquery获得控件值的三种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
jquery实现倒计时效果
这篇文章主要介绍了jquery实现倒计时效果，根据设计一个游戏引出的倒计时功能，需要的朋友可以参考下
2015-12-12
jQuery学习笔记之入门
本文主要对jQuery的基础知识进行介绍，非常适合刚开始接触JQuery学习的朋友们，下面就跟小编一起来看下吧
2016-12-12
编写高效jQuery代码的4个原则和5个技巧
有了JQuery对JS的整合和封装，它让页面操作更加的随心所欲，所以只有遵循良好的规范才会让代码更高效，更健壮。以下是我对如何高效操作JQuery的一些拙见，望指正！
2014-04-04

jQuery封装animate.css的实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具