jquery.easing.js的使用

浏览数：31 / 时间：2015年06月09日

jquery.easing.js是个好东西，各种动画效果扩展，加强和丰富了jquery自带的各种动画函数

box点击就会像移动出弹簧效果，$(obj).animate(目的状态，时间，回调函数)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        body {
            position:relative;
            width:100%;
            height:100px;
        }
        #box {
            position:absolute;
            width:100px;
            height:100px;
            background-color:red;
            top:0px;
            left:0px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easing.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#box").click(function () {
                $(this).stop(true, true).animate({
                    left:‘400px‘
                },
                2000, ‘easeInOutElastic‘,
                function () {
                    $(this).animate({
                        left: ‘0px‘
                    }, 2000, ‘easeInOutElastic‘);
                });
            });
        });
    </script>
</body>
</html>

还支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果函数

各种动画效果如下,自己去试

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery.easing.js的使用