jQuery学习-显示与隐藏

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>显示与隐藏</title>

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

        <style>

        .me{

            position: absolute;

            left: %;

            top: %;

            margin-left: -200px;

            margin-top: -;

            width: 400px;

            height: 100px;

            background-color: orange;

            overflow: auto;

            padding: 10px;

        }

        </style>

        <script type="text/javascript">

            //页面加载完成简写形式

            $(function(){

                //其他动画效果  slideUp slideDown 拉窗帘

                //fadeOut fadeIn 渐出 渐入效果

            $("#toggle").on("click",function(){

                if($(".me").css("display")=="none")

                {

                    //$(".me").css("display","block");//显示

                    $(".me").show(); //动画显示 元素

                }

                else

                {

                    //$(".me").css("display","none");//隐藏

                    $(".me").hide(,function(){

                        alert("我隐藏起了!")

                    });//动画隐藏 元素 第二个参数 在执行完隐藏后执行

                }

            });

            })

        </script>

    <body>

        <button id="toggle">显示/隐藏</button>

        <div class="me">

        </div>

    </body>

</html>
秒客网

jQuery学习-显示与隐藏

相关文章
