jquery.easing.js的使用示例

最新推荐文章于 2024-05-26 09:41:20 发布

vcxiaohan2

最新推荐文章于 2024-05-26 09:41:20 发布

阅读量5.5k

点赞数

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/50097535

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ easing示例

本插件是在jquery原有的动画基础上的拓展

可供选择的效果有匀速运动、变加速运动、缓冲波动效果：

linear，swing，jswing，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

以下贴上简单代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>demo</title>  
    <script src="../js/jquery-1.11.3.min.js"></script>  
    <script src="js/jquery.easing.min.js"></script>  
</head>  
<style>  
    * {  
        padding: 0;  
        margin: 0;  
    }  
    .div1,.div2 {  
        width: 100px;  
        height: 100px;  
        background: red;  
        margin: 5px;  
        cursor: pointer;
    }  
</style>  
<body>  
    <p>点击下面块查看效果</p>
    <div class="div1">1</div>  
    <div class="div2">2</div>  
  
<script>  
    //示例1--点击使用easing效果，支持jquery内置效果  
    $(".div1").click(function() {  
        $(this).slideUp({  
            duration: 1000,  
            easing: "easeInOutBack"//easing.js扩展效果  
        })  
    })  
  
    //示例2--点击在animate基础上拓展效果  
    $(".div2").click(function() {  
        $(this).animate({  
            width: 300  
        },{  
            easing: "easeInOutBack",  
            complete: function() {//回调函数  
                $(this).animate({  
                    height: 200  
                },{  
                    easing: "easeOutBounce"  
                })  
            }  
        })  
    })  
</script>  
</body>  
</html>

vcxiaohan2

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery.easing.js的使用示例

本插件是在jquery原有的动画基础上的拓展可供选择的效果有匀速运动、变加速运动、缓冲波动效果：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQui
复制链接

扫一扫