jquery.easing.js(转)
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。
jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。
引入Easing js文件
该插件基于jQuery,所以需要同时引入jQuery库文件和Easing js文件。
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script>
使用jQuery Easing
jQuery Easing是在jQuery原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。
1.jQuery默认动画
支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果,使用代码如下:
$(element).slideUp({ duration: 1000, easing: method, complete: callback });
参数duration:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。
参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们 是:linear,swing,jswing,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic, easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart, easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine, easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc, easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic, easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce. 各动画实际效果请参照演示demo。
参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。
2.使用jQuery自定义动画函数animate()
jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果,使用代码如下:
$(element).animate({ height:500, width:600 },{ easing: 'easeInOutQuad', duration: 500, complete: callback });
上面的代码定义了一个缓冲效果的动画,我们可以根据项目需要,结合jQuery Easing制作各种动画效果。来源于helloweba.com
转载于:https://www.cnblogs.com/Watcher/p/3685748.html
jquery.easing.js(转)相关推荐
- JQuery Easing.js插件
jQuery Easing.js 插件 介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果. 环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引 ...
- jquery rotate.js
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- java easing_[Java教程]jQuery Easing 动画效果扩展
[Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...
- jQuery Easing 动画效果扩展
官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...
- jquery.easing
easing 是jquery.animate(properties,[duration],[easing],[complete])中的一个属性,用来设定过渡效果的名称. 如果在项目要使用特殊的动画效果 ...
- jquery.cycle.js
jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- jQuery easing 使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
最新文章
- Ubuntu 14.04 64bit上curl-7.37源码包中的sample 源码示例研究
- oracle和dba,oracle db、dba和rdba
- 前众信旅游B端产品经理吴彪:如何搭建B端电商产品及用户体系
- socket编程中的异常处理
- 如何使Putty会话颜色更美观
- vins-mono中在rviz可视化下如何在world坐标系中让视角跟着相机移动
- Intellij IDEA汉化教程
- jquery分页插件精选
- skype显示未连接服务器,skype链接检测不到服务器
- Linux基础命令1
- Python入门:使用turtle库 绘制时钟(经典画表)
- 网络攻防技术——缓冲区溢出攻击实验
- acer switch 10 linux,acer switch 10好不好
- 戴尔台式计算机怎么安装的,戴尔台式系统安装图解 戴尔台式机一键安装系统...
- 一文打通ER图(手把手教你画)
- rust货轮什么时候出现_面食究竟是什么时候出现的?浅谈古代面食发展和变迁史...
- Nginx LVS 阿里云SLB
- 分组器及事前控制相关系统介绍
- 程序员的五层境界,你在哪一层?最后一层的,都是人生赢家
- 打开、关闭系统软键盘(触摸屏)
热门文章
- apache URL重写
- S5 Linux信息显示与搜索文件命令
- LNMP平台对接redis服务
- 3d17304计算机开机号,福彩3D17304期福彩3D开机号147对应码653牛彩网关注数037金码0...
- python多线程并行编程_Python并行编程(二):基于线程的并行
- win10专业版虚拟机配置服务器,虚拟机专用专业版win10 账号密码
- 【深度探讨】阿里巴巴万级规模 K8s 集群全局高可用体系之美
- 深耕边缘计算 揭秘阿里云边缘云网一体化的技术实践
- C#-文件操作类 Directory 109
- Oracle:容器数据库简介