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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现动态向上滚动
Dec 21 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
react-router中的属性详解
2017/06/01 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python遍历数组的方法小结
2015/04/30 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
django 读取图片到页面实例
2020/03/27 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
计算机应用专业推荐信
2013/11/13 职场文书
产品工艺师的岗位职责
2013/11/15 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
中式婚礼主持词
2014/03/13 职场文书
新员工考核评语
2014/12/31 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL