jQuery封装animate.css的实例


Posted in jQuery onJanuary 04, 2018

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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
基于jquery.page.js实现分页效果
Jan 01 #jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
You might like
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
web 页面分页打印的实现
2009/06/22 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python找出list中最常出现元素的方法
2016/06/14 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
低碳环保演讲稿
2014/08/28 职场文书
见习报告格式要求
2014/11/04 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
亲属关系公证书样本
2015/01/23 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS