jQuery Easing 运动效果插件 easing.js

时间 2020-01-12 标签 jquery easing 运动效果插件 easing.js easing js

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

引入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：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。java

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

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

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>