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 () {
//                //显示动画用法1:   show();   不加参数
                $("div").show();  //通过这个方法实现的:display: block;

//                //显示动画用法2:   show(2000);   毫秒值
//                $("div").show(2000);  //通过这个方法实现的:display: block;
//                //通过控制  宽高透明度和display

                //显示动画用法3:   show(字符串);   slow慢:600ms   normal正常:400ms   fast快:200ms
//                $("div").show("slow");
//                $("div").show("fast");
//                $("div").show("normal");

                //显示动画用法1:   show(毫秒值,回调函数[显示完毕执行什么]);
//                $("div").show(5000,function () {
//                    alert("动画执行完毕!");
//                });
            })

            //隐藏动画
            $("button:eq(1)").click(function () {
//                //显示动画用法1:   hide();   不加参数
                $("div").hide();  //通过这个方法实现的:display: none;

//                //显示动画用法2:   hide(2000);   毫秒值
//                $("div").hide(2000);  //通过这个方法实现的:display: none;
//                //通过控制  宽高透明度和display

                //显示动画用法3:   hide(字符串);   slow慢:600ms   normal正常:400ms   fast快:200ms
//                $("div").hide("slow");
//                $("div").hide("fast");
//                $("div").hide("normal");

                //显示动画用法4:   hide(毫秒值,回调函数[显示完毕执行什么]);
//                $("div").hide(2000,function () {
//                    alert("动画执行完毕!");
//                });
            })

            $("button:eq(2)").click(function () {
                //显示隐藏切换
                //同样有四种用法
                $("div").toggle(2000);
            })
        })
    </script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>

</body>
</html>

动画滑入和滑出

<!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:   slideDown();   不加参数
                $("div").slideDown();

//                //滑入动画用法2:   slideDown(2000);   毫秒值
//                $("div").slideDown(2000);
//                //通过控制  高和display

                //滑入动画用法3:   slideDown(字符串);   slow慢:600ms   normal正常:400ms   fast快:200ms
//                $("div").slideDown("slow");
//                $("div").slideDown("fast");
//                $("div").slideDown("normal");

                //滑入动画用法4:   slideDown(毫秒值,回调函数[显示完毕执行什么]);
//                $("div").slideDown(5000,function () {
//                    alert("动画执行完毕!");
//                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {
//                //滑出动画用法1:   slideUp();   不加参数
//                $("div").slideUp();

//                //滑出动画用法2:   slideUp(2000);   毫秒值
//                $("div").slideUp(2000);  //通过这个方法实现的:display: none;
//                //通过控制  高和display

                //滑出动画用法3:   slideUp(字符串);   slow慢:600ms   normal正常:400ms   fast快:200ms
//                $("div").slideUp("slow");
//                $("div").slideUp("fast");
//                $("div").slideUp("normal");

                //滑出动画用法1:   slideUp(毫秒值,回调函数[显示完毕执行什么]);
                $("div").slideUp(2000,function () {
                    alert("动画执行完毕!");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换
                //同样有四种用法
                $("div").slideToggle(1000);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>

</body>
</html>

动画淡入和淡出

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

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {
//                //淡入动画用法1:   fadeIn();   不加参数
                $("div").fadeIn();

//                //淡入动画用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通过控制  透明度和display

                //淡入动画用法3:   fadeIn(字符串);   slow慢:600ms   normal正常:400ms   fast快:200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入动画用法4:   fadeIn(毫秒值,回调函数[显示完毕执行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("动画执行完毕!");
//                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {
//                //滑出动画用法1:   fadeOut();   不加参数
//                $("div").fadeOut();

//                //滑出动画用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通过这个方法实现的:display: none;
//                //通过控制  透明度和display

                //滑出动画用法3:   fadeOut(字符串);   slow慢:600ms   normal正常:400ms   fast快:200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出动画用法1:   fadeOut(毫秒值,回调函数[显示完毕执行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("动画执行完毕!");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换
                //同样有四种用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //同样有四种用法
                $("div").fadeTo(1000,0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>

</body>
</html>

自定义动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
//                var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
//                var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};
//
//                //自定义动画
//                $("div").animate(json,1000, function () {
//                    $("div").animate(json2,1000, function () {
//                        alert("动画执行完毕!");
//                    });
//                });


//                //自定义动画
//                $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
//                $("div").animate({"height":0},2000);
//                $("div").animate({"opacity":0},2000);

            })
        })
    </script>
</head>
<body>
<button>动画</button>
<div></div>
</body>
</html>

动画停止

<!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>

推荐阅读更多精彩内容

  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 602评论 0 2
  • jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。...
    阿r阿r阅读 567评论 0 4
  • 调用 show() 和 hide() 方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素...
    guyon阅读 188评论 0 0
  • 隐藏与显示 .hide() 隐藏某个元素.hide("fast / slow") //这是一个动画设置的快捷方式,...
    学开船不会开船阅读 50评论 0 0
  • 1.显示隐藏动画 show()方法(1): (2): (3): (4): hide()方法(同show一样)$("...
    MGd阅读 1,130评论 0 0