一、jQuery ——淡入淡出

jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
1、fadeIn() 用于淡入已隐藏的元素
2、fadeOut() 用于淡出可见元素

3、fadeToggle()

方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

4、fadeTo() 方法允许渐变为给定的不透明度

一、

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法：

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入fadeIn动画</title>


    <style>

        div{

            top: 20px;
            width: 100px;
            height: 100px;
            display: none;

        }

        .box1{

            background-color: red;

        }

        .box2{
            background-color: orange;
        }

        .box3{

            background-color: #2b542c;
        }
    </style>

</head>
<body>

<button type="button">淡入</button>


<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<!--


可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

-->

<script src="jquery-1.11.3.min.js"></script>

<script>


    $(document).ready(function () {


        $("button").click(function () {


            $(".box1").fadeIn();
            $(".box2").fadeIn("slow");
            $(".box3").fadeIn(1000);



        });



    });

</script>





</body>
</html>

二、

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡出动画fadeOut</title>

    <style>

        div{

            margin-top: 20px;
            width: 100px;
            height: 100px;

        }

        .box1{

            background-color: red;

        }

        .box2{
            background-color: orange;
        }

        .box3{

            background-color: #2b542c;
        }
    </style>


</head>
<body>

        <button type="button">淡出</button>


        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

        <!--


        可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

            可选的 callback 参数是 fading 完成后所执行的函数名称。


        -->

        <script src="jquery-1.11.3.min.js"></script>

        <script>




            $(document).ready(function () {


                $("button").click(function () {

                    $(".box1").fadeOut();
                    $(".box2").fadeOut("slow");
                    $(".box3").fadeOut(2000);


                });


            });



        </script>


</body>
</html>

三、

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出fadeToggle</title>


    <style>

        div{

            margin-top: 20px;
            width: 100px;
            height: 100px;

        }

        .box1{

            background-color: red;

        }

        .box2{
            background-color: orange;
        }

        .box3{

            background-color: #2b542c;
        }
    </style>
</head>
<body>

<button type="button">切换</button>


<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


<script src="jquery-1.11.3.min.js"></script>

<script>


    $(document).ready(function () {

        $("button").click(function () {

            $(".box1").fadeToggle();
            $(".box2").fadeToggle("slow");
            $(".box3").fadeToggle(2000);

        });


    });



</script>


</body>
</html>

四、

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>

    <style>

        div{

            margin-top: 20px;
            width: 100px;
            height: 100px;


        }

        .box1{

            background-color: red;

        }

        .box2{
            background-color: orange;
        }

        .box3{

            background-color: #2b542c;
        }
    </style>


</head>
<body>


<button type="button">透明度</button>


<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<script src="jquery-1.11.3.min.js"></script>

<script>

        $(document).ready(function () {

            $("button").click(function () {

                $(".box1").fadeTo(500,0.5);
                $(".box2").fadeTo("slow",0.8);
                $(".box3").fadeTo(2000,0.2);



        });



        });


</script>


</body>
</html>