jQuery easing 使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:
- properties:一组包含作为动画属性和终值的样式属性和及其值的集合
- duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
- easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"
- complete(可选):在动画完成时执行的函数
jQuery easing 使用方法
- <</span>script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></</span>script>
- <</span>script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></</span>script>
引入之后,easing参数可选的值就有以下32种:
- linear
- swing
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInSine
- easeOutSine
- easeInOutSine
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
- jQuery.extend( jQuery.easing,
- {
- easeOutExpo: function (x, t, b, c, d) {
- return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
- },
- easeOutBounce: function (x, t, b, c, d) {
- if ((t/=d) < (1/2.75)) {
- return c*(7.5625*t*t) + b;
- } else if (t < (2/2.75)) {
- return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
- } else if (t < (2.5/2.75)) {
- return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
- } else {
- return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
- }
- },
- });
使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:
- $(myElement).animate({
- top: 500,
- opacity: 1
- }, 1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:
- $(myElement).animate({
- left: [500, 'swing'],
- top: [200, 'easeOutBounce']
- });
也可以用另外一种写法:
- $(myElement).animate({
- left: 500,
- top: 200
- }, {
- specialEasing: {
- left: 'swing',
- top: 'easeOutBounce'
- }
- });
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:
- $(myElement).slideUp(1000, method, callback});
- $(myElement).slideUp({
- duration: 1000,
- easing: method,
- complete: callback
- });
jQuery easing 图解
1. linear | 2. swing | 3. easeInQuad | 4. easeOutQuad | 5. easeInOutQuad | 6. easeInCubic |
7. easeOutCubic | 8. easeInOutCubic | 9. easeInQuart | 10. easeOutQuart | 11. easeInOutQuart | 12. easeInQuint |
13. easeOutQuint | 14. easeInOutQuint | 15. easeInExpo | 16. easeOutExpo | 17. easeInOutExpo | 18. easeInSine |
19. easeOutSine | 20. easeInOutSine | 21. easeInCirc | 22. easeOutCirc | 23. easeInOutCirc | 24. easeInElastic |
25. easeOutElastic | 26. easeInOutElastic | 27. easeInBack | 28. easeOutBack | 29. easeInOutBack | 30. easeInBounce |
转载于:https://www.cnblogs.com/shimily/articles/6655481.html
jQuery easing 使用方法相关推荐
- jQuery Easing 使用方法及其图解
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jQuery Easing 动画效果扩展
官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...
- java easing_jQuery animate easing使用方法图文详解
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jQuery Easing 的最简单使用方法
导入js包easing.js,资源有免费下载的 然后写效果: 一种方法就是配合animate,演示代码如下: function ceshi(){ $('.yqt').animate({left : ' ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- jQuery 效果 - animate() 方法
实例 改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({hei ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- jQuery easing
properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "n ...
- jquery.easing
easing 是jquery.animate(properties,[duration],[easing],[complete])中的一个属性,用来设定过渡效果的名称. 如果在项目要使用特殊的动画效果 ...
最新文章
- 将CVESUMMARY写成HTML文件
- 浅玩JavaScript的数据类型判断
- 解决mysql 1032 主从错误
- Nacos完全关闭配置
- 工程师的NIOS II学习笔记(转)
- python之爬虫(四)之 Requests库的基本使用
- chrome关闭自动更新 mac
- HTTP--历史、组件系统
- SpringBoot+Redis 搞定搜索栏热搜、不雅文字过滤功能
- Failed to access IIS metabase
- 火车售票系统html模板,火车售票系统完整代码.doc
- 斐讯K2路由编译Padavan华硕固件和心得
- Matlab科研绘图颜色补充(特别篇)—51种中国传统颜色
- h5怎么做分享到QQ 、朋友圈、微信 、微博等功能
- 视频处理系列︱利用达摩院ModelScope进行视频人物分割+背景切换(一)
- SQL高级查询案例讲解与分析
- 个人项目 小跟班——蓝牙小车控制(UI篇)
- Javascript——高级进阶
- MS建模后转成LAMMPS的data文件
- mysql拒绝访问root用户_对于出现拒绝访问root用户的解决方案
热门文章
- 云栖科技评论第57期:技术拓展科学边界 科学激发技术创新
- 如何让你的手机比别人最先升级到 Android L
- 使用mvc时,在视图view中使用强类型视图,在web.config文件中添加命名空间namespace的引用不起作用,解决方法...
- python偏函数和高阶函数_Python高阶函数-偏函数
- 手机python3ide加法器_Python3开发常用工具
- Unity渲染管线-百人计划笔记
- windows安装gnu_在Windows上安装GNU Emacs
- linux 访问驱动器_Linux上的访问控制列表和外部驱动器:您需要了解的内容
- 分布式 开源_3个开源分布式跟踪工具
- 荷兰牛栏 荷兰售价_荷兰研究小组授予的数据共享项目