jQuery元素显示隐藏效果-优快云博客

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#but1").click(function(){
                    $("#p1").show();
                });//显示隐藏的元素
                
                $("#but2").click(function(){
                    $("#p2").hide();
                });//隐藏元素
                
                $("#but3").click(function(){
                    $("#p3").toggle();
                });//自动切换显示或隐藏
                
                
                
                
                $("#but4").click(function(){
                    $("#p1").slideDown("slow");
                });    //    以slow的速度滑出#p1    
                
                $("#but5").click(function(){
                    $("#p2").slideUp("slow");
                });//以slow的速度滑入#p2
                
                //$("#but6").click(function(){
                    //$("#p3").slideToggle("slow");
                //});    //以slow的速度滑出或滑入#p3    
            
            $("#but6").click(function(){
                    $('#p2').slideUp(300).delay(800).fadeIn(400);
                });    
            
            
            });
        </script>    
    </head>
    <style>            
            
            
            
            
            
            
    </style>
    <body>            
            
            
        <input id="but1" type="button" value="显示隐藏的元素">
        <input id="but2" type="button" value="隐藏元素">
        <input id="but3" type="button" value="自动切换显示或隐藏">            
        
        
        
        <input id="but4" type="button" value="滑出">
        <input id="but5" type="button" value="滑入">
        <input id="but6" type="button" value="自动滑出，滑入">            
            
        
        <p id="p1" style="display:none;">显示隐藏的元素</p>
        <p id="p2">隐藏元素</p>
        <p id="p3">自动切换显示或隐藏</p>    
            
            
    </body>
</html>