jquery.easing.js是一款jQuery動(dòng)畫效果插件，使用該插件可以實(shí)現(xiàn)直線勻速運(yùn)功挺物、變加速運(yùn)動(dòng)诉探、緩沖等豐富的動(dòng)畫效果沽损。它非常小巧曙博，且有多種動(dòng)畫方式供選擇，使用簡單且免費(fèi)。

動(dòng)畫效果

具體動(dòng)畫效果可以再菜鳥教程測試

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()等內(nèi)置的動(dòng)畫效果，jquery1.4以后的擴(kuò)展

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

個(gè)人示例代碼如下：

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

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

//easing 提供的內(nèi)置函數(shù)
$(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 () {//回調(diào)函數(shù)
            $(this).animate({
                height: 200
            }, {
                easing: "easeOutBounce"
            })
        }
    })
});