[jQuery编程挑战]001：实现页面元素加速动画效果

要求：

页面包含两个HTML元素：一个按钮，一个小方块
动画要求：点击按钮，小方块从页面坐标300,300，加速移动到0,0

相关知识点：

jQuery动画方法animate
easing参数的设置

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="utf-8">

        <title>实现页面元素加速动画效果</title>

        <style type="text/css">

            .btn {

                border: 1px solid #fff;

                border-radius: 4px;

                background-color: #5cb85c;

                width: 60px;

                height: 30px;

                line-height: 30px;

                text-align: center;

                color: #fff;

                cursor: pointer;

            }

            .btn:hover {

                background-color: #449D44;

            }

            .ball {

                position: absolute;

                left: 10px;

                top: 60px;

                background-color: #337AB7;

                width: 50px;

                height: 50px;

                border-radius: 50px;

            }

        </style>

        <script type="text/javascript" src="jquery-1.11.0.js"></script>

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

        <script type="text/javascript">

            $(function() {

                var $div = $('.btn'),

                    $ball = $('.ball');

                $div.on('click', function() {

                    $ball.animate({left: '200px', top: '200px'}, 'slow', 'jswing');

                })

            });

        </script>

    </head>

    <body>

        <div class="btn">开始</div>

        <div class="ball"></div>

    </body>

</html>

巴特西

[jQuery编程挑战]001：实现页面元素加速动画效果

最新文章

热门文章