jQuery -- 内容的淡入与淡出

本篇文章讲述了jQuery中文字或图形的淡入与淡出的动画效果，根据官方的API分为四个部分。

第一部分：show/hide/toggle

会出现五个滑块，点击后，内容会逐渐消失在左上角，有位移浮动。

h5文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script src="jquery-2.2.3.min.js"></script>
    <script src="index.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--<p>hello</p>-->
    <!--<button id="hide">隐藏</button>-->
    <!--<button id="show">显示</button>-->
    <!--<button id="toggle">隐藏/显示</button>-->
<script>

    // 使用for循环创建五个div块,然后在css中设定块的样式
    for (var i = 0 ; i < 5 ; i++){
        $("<div>").appendTo(document.body);
    }

    $("div").click(function(){
       $(this).hide(1000function (){
            $(this).remove();
        });
    });
</script>

</body>
</html>

js文件中：


$(document).ready(function(){

    // 通过id是需要"#"号的
   $("#hide").click(function(){
     $("p").hide(1000);  // 后边的参数是隐藏动画的延续时间,单位是毫秒
   });

    $("#show").click(function(){
        $("p").show(1000);
    });

    //  隐藏/显示
    $("#toggle").click(function(){
       $("p").toggle(100);
    });
});

另外，还有.css中对div块的设计：

div{
    background-color: red;
    width: 30px;
    height: 50px;
    margin: 2px;
    float: left;
}

第二部分：fade in/out/to/toggle

这个效果不会产生位移浮动，而是内容原地淡化或者出现。
有所不同的是： fade to是可以改变内容整体的透明度，所以后面存在两个参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <script src="jquery-2.2.3.min.js"></script>
    <script src="fadeindex.js"></script>
</head>
<body>
    <!-- fade in  是让其出现-->
    <button id="in">fade in</button>
    <!-- fade out 是让其隐藏-->
    <button id="out">fade out</button>
    <!-- toggle 是让其隐藏-->
    <button id="toggle">fade toggle</button>
    <!-- fade to 是让其隐藏-->
    <button id="to">fade to</button>


    <!--display:none  是让其默认出现的时候处于隐藏状态-->
    <div id="div1" style="width: 100px; height: 80px; background-color: aqua; display: none" ></div>
    <div id="div2" style="width: 100px; height: 80px; background-color: rebeccapurple; display: none" ></div>
    <div id="div3" style="width: 100px; height: 80px; background-color: gray; display: none" ></div>

</body>
</html>


$(document).ready(function(){
    $("#in").on("click",function(){
       $("#div1").fadeIn(1000);
       $("#div2").fadeIn(1000);
       $("#div3").fadeIn(1000);
    });
    $("#out").on("click",function(){
       $("#div1").fadeOut(1000);
       $("#div2").fadeOut(1000);
       $("#div3").fadeOut(1000);
    });
    $("#toggle").on("click",function(){
       $("#div1").fadeToggle(1000);
       $("#div2").fadeToggle(1000);
       $("#div3").fadeToggle(1000);
    });

    $("#to").on("click",function(){
        // 后边的参数是透明度(0~1)
       $("#div1").fadeTo(1000,0);
       $("#div2").fadeTo(1000,0.5);
       $("#div3").fadeTo(1000,1);
    });
});

第三部分：slide up/down/toggle

内容从上放逐渐伸展出来/从下方逐渐收缩至上方消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide滑动</title>
    <script src="jquery-2.2.3.min.js"></script>
    <script src="slide.js"></script>
    <style>
        #content,#flipshow,#fliphide,#fliptoggle{
            padding: 5px;
            text-align: center;
            background-color: red;
            border: solid 1px gray;
        }
        #content{
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="fliptoggle">隐藏/显示</div>
    <div id="content">hello world</div>
</body>
</html>


$(document).ready(function(){
   $("#flipshow").click(function(){
       $("#content").slideDown(1000);
   })
   $("#fliphide").click(function(){
       $("#content").slideUp(1000);
   })
   $("#fliptoggle").click(function(){
       $("#content").slideToggle(1000);
   })
});

第四部分：动画完成后的回调

这个与上面的不同，这是为了在动画完成后执行下一步操作。也可以用户执行一次操作，出现多个动画效果。

<body>
    <button id="btn">按钮</button>
    <p>hello world</p>
</body>


$(document).ready(function(){
    $("#btn").click(function(){
        //$("p").hide(1000,function(){
        //    //alert("动画结束,回调方法");
        //})

        // 一次进行两个动画 -- 颜色变红色的同事先隐藏,再出现
        $("p").css("color","red").slideUp(1000).slideDown(1000);
    })
});

jQuery -- 内容的淡入与淡出

猜你喜欢