jQuery Easing 运动效果插件 easing.js

最新推荐文章于 2024-05-26 09:41:20 发布

huang81820

最新推荐文章于 2024-05-26 09:41:20 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js框架

本文链接：https://blog.youkuaiyun.com/huang81820/article/details/26630665

js框架专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用jQuery Easing插件扩展jQuery的动画功能，实现直线匀速运动、变加速运动、缓冲等丰富的动画效果。通过Easingjs文件引入插件，并详细解释了如何设置动画参数如速度、结束回调函数以及动画效果类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

引入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

1.jQuery默认动画

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

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

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

参数complete：动画结束后回调函数callback，可以自定义动画结束后的调用函数。

参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：

jswing
def
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

具体每一个效果是做什么的可以慢慢试
从上面的可以看出每一种都分为 In Out InOut
In：是指动画开始的时候具有这个效果
Out：是指动画结束的时候具有这个效果
InOut：是指动画开始和结束的时候都具有这个效果
Elastic：就是具有弹簧效果的（easeInElastic[开始时弹簧]、easeOutElastic[结束时弹簧]、
easeInOutElastic[开始和结束都弹簧]）

使用方法：

<script type="text/javascript" language="javascript" src="JS/jquery.js"></script>
<script type="text/javascript" language="javascript" src="JS/easing.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("#xxxx").stop(true,false).animate({left : -320},1500,'easeOutElastic');
    })
</script>