07-jquery 特殊效果 

fadeIn() 淡入
fadeOut()淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上展开
slideToggle() 依次展开或卷起某个元素
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height:300px;
            background-color:gold;
        }

        .box1{
            width:300px;
            height:300px;
            background-color:gold;
            display:none;
        }
    </style>
    <script src="js/jquery.js"></script>
    
    <script>
        $(function(){
            $("#btn").click(function(){
                // .box淡出
                $(".box").fadeOut()
            })

            $("#btn1").click(function(){
                /*.box1淡入，本来display为none
                
                $(".box1").fadeIn()

                */
                // fadeIn\fadeOut()可以加参数，第一个参数是时间，第二个参数是运动方式，可以不写，默认是swing缓冲运动，第三个参数是动画完成后执行的函数。三个参数可以都不写，也可以只写一个、2个、3个。
                $(".box1").fadeIn(function(){alert("down")})

            })
        })

    </script>
</head>
<body>
    <input type="button" value="change" id="btn">
    <div class="box"></div>
    <input type="button" value="change" id="btn1">
    <div class="box1"></div>
</body>
</html>

 

    <script src="js/jquery.js"></script>
    
    <script>
        $(function(){
            $("#btn").click(function(){
                // .box淡出
                $(".box").fadeOut()
            })

            $("#btn1").click(function(){
                //反复切换淡出和淡入，同样后面括号里可以写参数
                $(".box1").fadeToggle()
      

            })
        })

    </script>

show() hide() toggle():

   <script src="js/jquery.js"></script>
    
    <script>
        $(function(){
            $("#btn").click(function(){
                // .boxs:show() hide() toggle()
                // $(".box").hide()
            　　//点击切换显示和隐藏
                $(".box").toggle()
            })

        })

    </script>

slideDown()、slideUp()、slideToggle():

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height:300px;
            background-color:gold;
            display:none;
        }

    </style>
    <script src="js/jquery.js"></script>
    
    <script>
        $(function(){
            $("#btn").click(function(){
              
                //向下展开
                // $(".box").slideDown()

                //点击切换：展开 收起
                $(".box").slideToggle()
            })

        })

    </script>
</head>
<body>
    <input type="button" value="change" id="btn">
    <div class="box"></div>
    
</body>
</html>

 

posted @ 2019-03-25 00:02  greenfan  阅读(67)  评论(0)    收藏  举报