jQuery Easing 使用方法及其图解
来源:互联网 发布:武汉商学院与知行学院 编辑:程序博客网 时间:2024/04/29 11:11
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:
- properties:一组包含作为动画属性和终值的样式属性和及其值的集合
- duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
- easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"
- complete(可选):在动画完成时执行的函数
其中参数easing默认有两个效果:"linear"和"swing",如果需要更多效果就要插件支持了,jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果,大家可以点击这里去看每一种easing的演示效果,下面详细介绍下其使用方法及每种easing的曲线图。
jQuery easing 使用方法
首先,项目中如果需要使用特殊的动画效果,则需要在引入jQuery之后引入jquery.easing.1.3.js,切记哦,不然会报错的!!!
- <</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.easing.1.3.js,我们可以只把我们需要的几种easing放入Javascript文件中,如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果,只需要下面的代码就可以了
- 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 图解
以下图解可以让你更容易理解每一种easing的效果:
1. linear2. swing3. easeInQuad4. easeOutQuad5. easeInOutQuad6. easeInCubic7. easeOutCubic8. easeInOutCubic9. easeInQuart10. easeOutQuart11. easeInOutQuart12. easeInQuint13. easeOutQuint14. easeInOutQuint15. easeInExpo16. easeOutExpo17. easeInOutExpo18. easeInSine19. easeOutSine20. easeInOutSine21. easeInCirc22. easeOutCirc23. easeInOutCirc24. easeInElastic25. easeOutElastic26. easeInOutElastic27. easeInBack28. easeOutBack29. easeInOutBack30. easeInBounce 0 0
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery Easing 使用方法及其图解
- jQuery easing 图解
- jQuery Easing 的最简单使用方法
- jQuery Easing
- easing.js使用方法
- jQuery Easing 运动效果插件 easing.js
- jQuery Easing 动画
- jquery.easing的使用
- SSH 免密码登录
- 每天一篇python:环境搭建篇
- 广度优先搜索(BFS)
- 观察者模式
- flex中toolTip汇总
- jQuery Easing 使用方法及其图解
- 安装SonarQube
- 一个网站完整的SEO优化方案
- Message Queue(消息队列)以及Handler介绍
- 合成CSS图片
- OpenCv中实现了三种立体匹配算法:
- Cg入门18:Fragment shader - 边缘泛光和透明
- 使用eagle导出PCB制造商可用的gerber文件
- GetSysColor()