jQuery Easing 动画效果扩展增强插件 - 资源分享

jQuery Easing 动画效果扩展增强插件

发布于 2019-01-01 字数 3630 浏览 2330 评论 0

jQuery API 提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款 jQuery 动画效果扩展增强插件 jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

jQuery Easing 动画效果扩展增强插件

jQuery Easing 是一款比较老的 jQuery 插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。

使用方法

该插件基于 jQuery,所以需要同时引入 jQuery 库文件和 Easing 的 JS 文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>

jQuery Easing 是在 jQuery 原有的动画效果上进行了扩展,所以使用时可以根据 jQuery 原有的动画函数进行扩展。

jQuery 默认动画

支持 toggle()、slideUp()、slideDown()、show()、hide() 等 jQuery 内置的动画效果,使用代码如下:

$(element).slideUp({
    duration: 1000, 
    easing: method, 
    complete: callback
});

参数 duration:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。

参数 easing:指定动画效果,Easing 提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们是: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:动画结束后回调函数,可以自定义动画结束后的调用函数。

使用 jQuery 自定义动画函数 animate()

jQuery Easing 结合 jQuery 的自定义动画函数 animate() 可以制作各种你想要的动画效果,使用代码如下:

$(element).animate({
    height:500,
    width:600
    },{
    easing: 'easeInOutQuad',
    duration: 500,
    complete: callback
});

上面的代码定义了一个缓冲效果的动画,我们可以根据项目需要,结合 jQuery Easing 制作各种动画效果。

单独使用方法

jQuery.easing.method() All your scripts can use these equations. Call from some kind of time based loop as follows:

jQuery.easing.method(
    null,
    current_time,
    start_value,
    end_value,
    total_time
)

这是方程不需要一个额外的参数需要兼容 jQuery

下载地址

Download the following:

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论