1-3效果 - 8-3-4 动画 - 《JavaScript 从入门到进阶》

1-1jQuery animate() 方法（用于创建自定义动画）
- 语法：
1-1-1jQuery animate() - 操作多个属性

1-1jQuery animate() 方法（用于创建自定义动画）

语法：

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

隐藏与显示.gif

<body>
    <button>开始动画</button>
    <p>
       默认情况下，所有 HTML 元素的位置都是静态的，
       并且无法移动。如需对位置进行操作，
       记得首先把元素的 CSS position 
       属性设置为 relative、fixed 或 absolute。
    </p>
    <div></div>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({left:"250px"})
            })
        })
    </script>
</body>
    <style>
        div{
            background-color: coral;
            height: 100px;
            width: 100px;
            position: absolute;
        }
    </style>

1-1-1jQuery animate() - 操作多个属性

隐藏与显示.gif

<script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:"250px",
                    opacity:"0.5",
                    height:"150px",
                    width:"150px"
                })
            })
        })
    </script>

1-1-2 jQuery animate() - 使用相对值

<script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:"250px",
                    height:"+=150px",
                    width:"+=150px"
                })
            })
        })
    </script>

1-1-3 jQuery animate() - 使用预定义的值

隐藏与显示.gif

   <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                   height:"toggle"
                })
            })
        })
    </script>

1-1-4 jQuery animate() - 使用队列功能

jQuery 提供针对动画的队列功能

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                    var div = $("div");
                    div.animate({ height: '300px', opacity: '0.4' }, "slow");
                    div.animate({ width: '300px', opacity: '0.8' }, "slow");
                    div.animate({ height: '100px', opacity: '0.4' }, "slow");
                    div.animate({ width: '100px', opacity: '0.8' }, "slow");
            })
        })
    </script>

隐藏与显示.gif

1-1-5

隐藏与显示.gif

   <script>
        $(document).ready(function () {
            $("button").click(function () {
                var div = $("div");
                div.animate({ left: '100px' }, "slow");
                div.animate({ fontSize: '3em' }, "slow");
            })
        })
    </script>