jQuery学习-显示与隐藏 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>显示与隐藏</title>
        <script src="js/jquery.js"></script>
    
        <style>
        .me{ 
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -75;
            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(1000); //动画显示 元素
                }
                else
                {
                    //$(".me").css("display","none");//隐藏
                    $(".me").hide(1000,function(){
                        alert("我隐藏起了!")
                    });//动画隐藏 元素 第二个参数 在执行完隐藏后执行
                }
                
            });
                
            })
        
        </script>
    <body>
        <button id="toggle">显示/隐藏</button>
        <div class="me">
            
        </div>
    </body>
</html>

 

posted @ 2016-11-17 10:39  whzym111  阅读(137)  评论(0)    收藏  举报