jquery.easing.js 使用方法

jquery.easing.js是一款jQuery动画效果插件，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。它非常小巧，且有多种动画方式供选择，使用简单且免费。

动画效果

具体动画效果可以再菜鸟教程测试

https://www.runoob.com/jqueryui/api-easings.html

linear  swing  jswing  easeInQuad  easeOutQuad  easeInOutQuad  easeInCubic             
easeOutCubic  easeInOutCubic  easeInQuart  easeOutQuart  easeInOutQuart 
easeInQuint  easeOutQuint  easeInOutQuint  easeInSine  easeOutSine 
easeInOutSine  easeInExpo  easeOutExpo  easeInOutExpo  easeInCirc 
easeInOutCirc  easeInElastic  easeOutElastic  easeInOutElastic  easeInBack 
easeInOutBack  easeInBounce  easeOutBounce  easeInOutBounce

首先引入jQuery库文件和Easing js文件。

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

支持toggle()、slideUp()、slideDown()、show()、hide()等内置的动画效果，jquery1.4以后的扩展

https://j11y.io/javascript/easing-in-jquery-1-4a2/

个人示例代码如下：

//基础1
$(element).animate({
    top: 500,
    opacity: 1
}, 1000, 'easeOutBounce');

//基础2
$(element).animate({left:200},{
    duration:1000,
    easing:method,
    complete:callback  
    })

//easing 提供的内置函数
$(element).show({  
    duration: 1000,   
    easing: method,   
    complete: callback  
});

示例1

//css    
 .div1 {
       position: absolute;
       left: 0;
       top: 0;
      width: 100px;
      height: 100px;
      background: red;
      margin: 5px;
      cursor: pointer;
 }

  //html    
<div class="div1">示例</div>

//js 
$(".div1").click(function () {
    $(this).animate({
        width: 300
    }, {
        easing: "easeInOutBack",
        complete: function () {//回调函数
            $(this).animate({
                height: 200
            }, {
                easing: "easeOutBounce"
            })
        }
    })
});