jquery的各种隐藏显现动画的区别

时间：2025-04-05 15:33:25
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8"/>

    <title></title>

    <script src="../js/jquery-1.10.2.js"></script>

    <script>

        $(function(){

            $("input").click(function(){

                $("div").hide(3000);

                $("div").show(3000);

                $("div").toggle(3000);

                //上面三个改变的是长，宽和透明度

                $("div").slideDown(3000);

                $("div").slideUp(3000);

                $("div").slideToggle(3000);

                //上面三个改变的是长

                $("div").fadeIn(3000);

                $("div").fadeOut(3000);

                $("div").fadeTo(3000,0.3);

                $("div").fadeToggle(3000);

                //上面四个改变的是透明度，但是需要注意上面这四种方法中div从display：none;直接变成有长宽的透明度为零的块级元素，然后在改变透明度

            })

        })

    </script>

    <style>

        div{width:200px;height:200px;background-color: blue;

            display: none;

        }

    </style>

</head>

<body>

    <div></div>

    <input type="button" value="点我"/>

</body>

</html>

相关文章