jQuery Easing 动画效果扩展

原创文章 作者:月光光 2013年04月08日 21:42helloweba.com 标签:jQuery 

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.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/212.html

15条评论

  • duration参数的值必须是一个数字吗?不能用变量吗

  • 正在学习的小白路过:我加载了本地的jquery以后打开,点击tag还是没有反应,是我的加载方式出了问题吗?
    <script type="text/javascript" src="../../Javascript/jquery-1.12.0.js"></script>
    <script type="text/javascript" src="../../Javascript/jquery.easing.min.js"></script>
    ...两个文件都是放在desktop的WEB文件夹里的Javascript子文件夹里的哇...

  • sb一个

  • 还是只有高度变化 有种被欺骗的感觉 本地的几个版本都试过 没用

  • 好像我在测试页面没看出来有啥变化啊,和普通的slidedown相比较……

  • 墙内的朋友,你们下载源码后请将jquery库调用本地或国内cdn的,在线demo已经改成调用360cdn的了。

  • jquery用的是谷歌的,,中国访问不了。

  • 下载了加载本地的jquery就可以用了

  • ajax.googleapis.com 应该是jquery加载不了导致的吧。我把这个demo下载下来引用自己本地的jquery就可以了。之前我也遇到过jquery被挡在墙外的情况…… :mrgreen:

  • 点了有反应啊,看的很清楚,自己不会就瞎嚷嚷

  • 恩 好东西 感谢分享

  • 什么意思,我不会用?演示页面上那几个按钮,点击或拖动都没反应呀,你给指点一下大神?

  • 是你自己不会用吧

  • 搞什么,给的实例页面太假了,根本就没效果,要么就别给链接,给个没用的链接有意思吗?

  • 支持ipad和iphone吗 我在ipad上测试 不能拖动