jQuery显示与隐藏动画 

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:300px;
            height:300px;
            background:red;
            display:none;
        }
        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            $('button').eq(0).click(function(){                     //$('button')是获取到所有的button数组，eq(0)代表第一个button
                //$('div').slideDown(1000)                          //slideDown(1000),是表示从上往下滑出来，1000代表滑出整个需要的时间，单位是毫秒，可自行设置时间
                $('div').show(1000)                                 //show(1000),是从一个点动画出来，1000也是显示整个div所需的时间，单位是毫秒
            })
            $('button').eq(1).click(function(){
                //$('div').slideUp(1000)                            //同上slideDown(),slideUp是表示从下往上滑到无
                $('div').hide(1000)                                 //同上show(),hide()是隐藏起来的动画
            })
            $('button').eq(2).click(function(){
                //$('div').slideToggle(1000)                        //slideToggle(),当div隐藏时点击，触发的是slideDown(),div显示时点击，触发的是slideUp
                $('div').toggle(1000)                               //toggle(),当div隐藏是点击，触发show(),div显示触发的是hide()
            }) 
        })
        
    </script>
    
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div> 
        
    </div>
    
</body>
</html>

效果图

 

posted @ 2018-11-13 11:23  大C文  阅读(394)  评论(0)    收藏  举报