jquery_7（动画）

1. 动画语法：$(selector).animate({params},speed,callback);

2.callback函数： $(selector).hide(speed,callback)

       现象： JavaScript 语句是单线程，动画之后的语句可能会报错，因为动画还没有完成。

        解决方式：以参数的形式添加 Callback 函数。

3. 提示

        （1）因为animate默认所有 HTML 元素都有一个静态位置，且无法移动。所以使用的时候，特别是对位置操作的时候，一定要记得设置元素的 position 属性（relative、fixed 、absolute）

        （2）属性名的书写：

                （2.1）paddingLeft、marginRight 等等。

                （2.2）也可以这样'font-size':'50px'

        （3）色彩动画不包含在核心 jQuery 库中。

                色彩插件：在 jQuery.com 下载 Color Animations

4. stop语法：$(selector).stop(stopAll,goToEnd);

        stopAll：false（默认）只会停止活动的动画，后续的动画可以继续执行

        goToEnd：false（默认）立即完成当前动画

        因此，默认地，stop() 会清除在被选元素上指定的当前动画。

        div {
            left: 0;
            position: relative;
            color: red;
            background-color: rgba(0, 255, 0, 0.6);
            display: inline-block;
            /* width: 30px; */
        }

    <button id="start">start</button>
    <button id="stop">stop</button>
    <br>
    <br>
    <div>animate</div>

        $("#start").click(function () {
            $("div").animate(
                {
                    left: '200px',
                    top: "30px",
                    'font-size': '50px',
                    opacity: 0.6,
                    color: 'green' //无效
                },
                3000,
                // callback函数
                function () {
                    alert("The animate is now finish");
                }
            );

            $("#stop").click(function () {
                // $("div").stop(false, true);
                $("div").stop();
            });
        });