jquery动画之停止动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {
                $("div").slideDown(2000);
            })

            //滑出动画
            $("button:eq(1)").click(function () {
                $("div").slideUp(2000);
            })

            $("button:eq(2)").click(function () {
                $("div").stop();   //都不写，默认两个都是false;

                // 第一个参数表示后续动画是否要执行
                //（true:后续动画不执行  ;false:后续动画会执行）
                // 第二个参数表示当前动画是否执行完
                //（true:立即执行完成当前动画  ;false:立即停止当前动画）

                //四种情况：情况1：true,true
                //（后续动画不执行，立即执行完成当前动画）
//                $("div").stop(true,true);

                //四种情况：情况2：false,true
                //（后续动画会执行，立即执行完成当前动画）
//                $("div").stop(false,true);

                //四种情况：情况3：true,false
                //（后续动画不执行，立即停止当前动画`）
//                $("div").stop(true,false);

                //四种情况：情况4：true,false
                //（后续动画会执行，立即停止当前动画`）
//                $("div").stop(false,false);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>停止</button>
<div></div>

</body>
</html>
jquery动画之停止动画

猜你喜欢
