动画的淡入淡出

开发工具与关键技术：Visual Studio / jQuery中淡入淡出动画fadeOut
作者：郑名方
撰写时间：2019年6月 26日

在jQuery中淡入淡出动画fadeOut，fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果。所谓"淡出"是隐藏的一种结果，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。

<div class="fadeOut"> 
        <h2>fadeOut</h2>
        <p> jQuery中淡出动画fadeOut</p>
        淡出的隐藏效果：
        <select id="cboFadeOut">
            <option value="1">fadeOut( )</option>
            <option value="2">fadeOut( "slow" )</option>
            <option value="3">fadeOut( 4000 )</option>
            <option value="4">fadeOut( 1000, complete )</option>
            <option value="5">fadeOut( 1000, "linear" )</option>
            <option value="6">fadeOut( options )</option>
        </select>
        <button id="btnFadeOut">点击淡出隐藏</button>
        <button id="btnShow">点击显示</button>
    </div>
    <div class="fadeIn">
        <h2>fadeIn</h2>
        <p> jQuery中淡入动画fadeIn</p>
        选择：淡出的隐藏效果
        <select id="cboFadeIn">
            <option value="1">fadeIn( )</option>
            <option value="2">fadeIn( "slow" )</option>
            <option value="3">fadeIn( 3000 )</option>
            <option value="4">fadeIn( 2000, complete )</option>
            <option value="5">fadeIn( 1000, "linear" )</option>
            <option value="6">fadeIn( options )</option>
        </select>
        <button id="btnFadeIn">执行淡入效果</button>
        <button id="btnHide">点击隐藏</button>
    </div>
    <div class="fadeToggle">
        <h2>fadeToggle</h2>
        <p> jQuery中淡入淡出切换fadeToggle</p>
        淡入淡出的隐藏效果：
        <select id="cboFadeToggle">
            <option value="1">fadeToggle( )</option>
            <option value="2">fadeToggle( "slow" )</option>
            <option value="3">fadeToggle( 3000 )</option>
            <option value="4">fadeToggle( 1000, complete )</option>
            <option value="5">fadeToggle( 1000, "linear" )</option>
            <option value="6">fadeToggle( options )</option>
        </select>
        <button id="btnFadeToggle">点击切换显示/隐藏</button>
    </div>
    <div class="fadeTo">
        <h2>fadeTo</h2>
        <p> jQuery中淡入效果fadeTo</p>
        透明度的设置效果：
        <select id="cboFadeTo">
            <option value="1">fadeTo( "slow" ,0.5 )</option>
            <option value="2">fadeTo( 1000 ,0.2 )</option>
            <option value="3">fadeTo( 1000 ,0.7 ,complete)</option>
        </select>
        <button id="btnFadeTo">点击切换透明度</button>
    </div>

让元素在页面不可看见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。fadeOut([speed],[easing],[fn])参数说明：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
在jQuery中淡入淡出切换fadeToggle，fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。

 //btnFadeOut按钮的点击事件
        $("#btnFadeOut").click(function () {
            var value = $("#cboFadeOut").val();//获取下拉选项的value值
            if (value == "1") {
                $(".fadeOut p").fadeOut();//不带参数
            } else if (value=="2") {
                $(".fadeOut p").fadeOut("slow");//fadeout(speed)
            } else if (value == "3") {
                $(".fadeOut p").fadeOut(4000);//fadeout(speed)
            } else if (value == "4") {
                $(".fadeOut p").fadeOut(2000, function () {
                    alert("隐藏完毕!");//fadeout(speed,funtion(){})
                });
            } else if (value == "5") {
                $(".fadeOut p").fadeOut(1000, "linear");
            } else if (value == "6") {
                $(".fadeOut p").fadeOut({
                    duration: 1000
                });
            }
        });

而且jQuery中淡入效果fadeTo把所有匹配元素的不透明以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。fadeTo（）这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。而淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1。fadeIn：淡入效果，内容显示，opacity是0到1；adeOut：淡出效果，内容隐藏，opacity是1到0。

   //btnFadeIn按钮的点击事件
        $("#btnFadeIn").click(function () {
            var value = $("#cboFadeIn").val();//获取下拉选项的value值
            if (value == "1") {
                $(".fadeIn p").fadeIn();//不带参数
            } else if (value == "2") {
                $(".fadeIn p").fadeIn("slow");//fadeIn(speed)
            } else if (value == "3") {
                $(".fadeIn p").fadeIn(4000);//fadeIn(speed)
            } else if (value == "4") {
                $(".fadeIn p").fadeIn(2000, function () {
                    alert("隐藏完毕!");//fadeIn(speed,funtion(){})
                });
            } else if (value == "5") {
                $(".fadeIn p").fadeIn(1000, "linear");
            } else if (value == "6") {
                $(".fadeIn p").fadeIn({
                    duration: 1000
                });
            }
        });
         
        //btnFadeToggle 按钮的点击事件
        $("#btnFadeToggle").click(function () {
            var value = $("#cboFadeToggle").val();//获取下拉选项的value值
            if (value == "1") {
                $(".fadeToggle p").fadeToggle();//不带参数
            } else if (value == "2") {
                $(".fadeToggle p").fadeToggle("slow");//fadeIn(speed)
            } else if (value == "3") {
                $(".fadeToggle p").fadeToggle(4000);//fadeIn(speed)
            } else if (value == "4") {
                $(".fadeToggle p").fadeToggle(2000, function () {
                    alert("隐藏完毕!");//fadeIn(speed,funtion(){})
                });
            } else if (value == "5") {
                $(".fadeToggle p").fadeToggle(1000, "linear");
            } else if (value == "6") {
                $(".fadeToggle p").fadeToggle({
                    duration: 1000
                });
            }
        })
       
        //fadeTo 按钮的点击事件
        $("#btnFadeTo").click(function () {
            var value = $("#cboFadeTo").val();//获取下拉选项的value值
            if (value == "1") {
                $(".fadeTo p").fadeTo("slow", 0.5);//fadeTo(speed,opacity)
            } else if (value == "2") {
                $(".fadeTo p").fadeTo(1000, 0.2);//fadeTo(speed,opacity)
            } else if (value == "3") {
                $(".fadeTo p").fadeTo(1000, 0.9, function () {//fadeTo(speed,opacity,fn)
                    alert('完成');
                });
            }
        });

    下面的代码图片来源老师。