JQuery动画效果插件easing.js

简介

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

使用

1.  引入插件：引入jQuery库文件和Easing js文件。

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

2.  HTML

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

[CSS]
<style>
.div1 {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background: red;margin: 5px;cursor: pointer;}
</style>

3.  调用

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

相关链接

效果演示 ：  https://j11y.io/demos/jquery/easing/easing-jq14.html

官方文档 ：  https://overturejs.com/docs/animation/Easing.html

GitHub 地址 ：  https://github.com/danro/easing-js