jquery的动画显示隐藏效果停止

雨点打透心脏的1/2处 2022-07-14 00:40 363阅读 0赞

<!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(){
                    //显示动画用法1：show（）；括号里面不加参数 是没有缓动效果的
                    $("div").show();//底层是通过这个方法实现的:display:none;
    
                    //显示动画用法2: show（600）；括号里面写的是毫秒值；
                    $("div").show(2000);//通过控制 宽高透明度和 display；
    
                    //显示动画方法3：show（字符串）；slow慢：600ms；normal正常：400ms
                    $("div").show("slow");//慢
                    $("div").show("fast");//快
                    $("div").show("normal");//正常
    
                })
            });
    
    
    
     //------------------------------动画的滑入----------------------------------------//
                $("button").eq(1).click(function(){
                    //滑入动画用法1：slideDown（）不加参数
                    $("div").slideDown();
    
                    //滑入动画用法2：slideDown（2000）毫秒值
                    $("div").slideDown(2000); //同过控制高和display
    
                    //滑入动画用法3: slideDown(字符串)；slow：慢（600ms）；normal：正常（400ms）；fast：快200ms
                    $("div").slideDown("slow");
                    $("div").slideDown("normal");
                    $("div").slideDown("fast");
    
                    //滑入动画用法4：slideDown（毫秒值，回调函数[动画执行完毕，执行这个函数]）
                    $("div").slideDown(2000,function(){
                        alert("动画执行完毕！");
                    })
    
    
    
    //---------------------------------动画的滑出---------------------------------------------//
    
                    $("button").eq(2).click(function(){
                        //画出动画用法1：slideUp（）；不加参数
                        $("div").slideUp()//同上 括号里面的（数字；毫秒值，字符串：回调函数；动画执行完毕之后再执行函数）
                    });
    
    
    
    //----------------------------动画的切换----------------------------------------------------//
                    $("button:eq(3)").click(function () {
                        //滑入滑出切换
                        //同样有四种用法 两个属性来回切换。
                        $("div").slideToggle(1000);
                    })
                });
    
    
    //-------------------------停止动画---------------------------------------------------------//
    
                //括号里面的 第一个参数 表示后续动画是否执行；第二个参数 表示当前动画是否执行完；
                //括号里面的第二个参数false 表示当前动画不执行完毕，第一个参数false表示后续动画会执行；
                     $("div").stop();//括号里面 放两个bool类型 //当里面什么都不填的时候 所有动画都停止不执行 默认 false；
    
                //四种情况
                   //1.点击停止时 ，当前动画 执行完毕 在停止 后续动画不会执行；
                     $("div").stop(true,true);
    
                   //2.点击停止时，当前动画 立即停止 不执行完，后续动画不会执行；
                     $("div").stop(true,false);
    
                   //3.点击停止时当前动画会 立刻执行完毕，后续动画也会执行；
                     $("div").stop(false,true);
    
    
                   //4.点击停止时 当前动画 立即停止 不会执行完毕，后续动画执行完毕；
                     $("div").stop(false,false);
    
    
        </script>
    </head>
    <body>
        <button>显示</button>
        <button>滑入</button>
        <button>滑出</button>
        <button>切换</button>
    <div></div>
    </body>
    </html>