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制作各种动画效果。
相关推荐
jQuery easing动画运动效果.zip
jQuery Easing div切换效果的例子,不同效果的展示。
jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...
今天我给大家分享的是一款jQuery动画效果插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。它非常小巧,且有多种动画方式供选择,使用简单且免费。
asing插件大家也许一直在用,非常的不错,能实现很多你想要的效果,并且jquery的很多内置方法也开始支持Easing参数了,经常使用jquery的朋友一定会知道需要下载这个jar包
jquery.easing.js 1.3 动画效果扩展插件.zip
easing动画运动效果是一款简单的如淡入淡出以及自定义动画效果,支持直线匀速运功、变加速运动、缓冲等丰富的动画效果。
jquery.easing.1.3.min.js 动画效果js
jquery著名插件,easing,为animate动画提供不同的效果
jQuery.easing插件是一款非常轻,非常小的jQuery插件,只占有8KB大小 几乎不会影响你的网页加载速度。 它提供了简单的动画效果,如淡入淡出以及自定义动画效果,使用该插件可以实现直线匀速运功、变加速...
jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...
css3过渡效果不够用?通过jquery.easing.1.3.js可以为为动画增加更多的过渡效果如$('div').animate({'left':300},3000,'easeInOutElastic',function(){ //动画执行完毕回调函数 });
jQuery插件easing 效果,以前在flash制作编程中经常设计到的一种效果。很旋,包含了数十种效果
jquery-easing-1.3.pack.js jquery的animate方法内的easing效果。 默认jQuery提供"linear" 和 "swing".
jquery 模拟人工拖拽轨迹,生成轨迹数据
jQuery Easing插件的节点包装器是George McGinley Smith的很棒的库。 该项目将其与封装在一起,因此将更易于与AMD和Node一起使用。 这对于尤其有用。 安装: npm install jquery-easing用法: var jQuery = require ...
迄今为止发现的唯一一个兼容各种浏览器,而且可以居中显示的瀑布流程序代码! 个人原创
具体介绍 jquery插件之easing使用,适合移动开发的js使用
前端项目-jquery-easing,A jQuery plugin from GSGD to give advanced easing options
实现类似苹果的图标导航条点击切换效果jQuery插件easing.zip 实现类似苹果的图标导航条点击切换效果jQuery插件easing.zip 实现类似苹果的图标导航条点击切换效果jQuery插件easing.zip