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

最新推荐文章于 2021-09-12 19:30:45 发布

约德尔蒙

最新推荐文章于 2021-09-12 19:30:45 发布

阅读量804

点赞数

分类专栏： JQuery（以及源码解读）

本文链接：https://blog.csdn.net/gyq04551/article/details/53262582

版权

JQuery（以及源码解读）专栏收录该内容

23 篇文章 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的动画显示隐藏效果停止

div{ width: 300px; height: 300px; display: none; background-color: pink; } //------------------------------动画之显示和隐藏-----------
复制链接

扫一扫