建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery动画效果插件easing.js

来源:易助科技网浏览量:42收藏

简介


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


JQuery动画效果插件easing.js-示例图



使用


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