jQuery Easing 动画效果扩展
jQuery动画效果扩展增强插件jquery.easing.js
查看示例:
http://www.helloweba.com/demo/easing/
jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。
使用方法:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
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.各动画实际效果请参照
参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。
2.使用jQuery自定义动画函数animate()
jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果,使用代码如下:
$(element).animate({
height:500,
width:600
},{
easing: 'easeInOutQuad',
duration: 500,
complete: callback
});
最后更新于 2017-03-17 15:58:08 并被添加「」标签,已有 597 位童鞋阅读过。
此处评论已关闭