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

发布于 2019-01-01 19:18:42 字数 3102 浏览 2454 评论 0

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

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:

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。