淡入淡出

开发工具与关键技术：MVC
作者：胡名权
撰写时间：2019年6月1日

我们先写它的css样式：

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

//点击显示按钮的点击事件
        $("#btnShow").click(function () {
            $(".fadeOut p").show();//显示p标签
        });
//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(3000);//fadeout(speed)
            } else if (value == "4") {
                $(".fadeOut p").fadeOut(1000, function () {
                    alert("隐藏完毕!");//fadeout(speed,funtion(){})
                });
            } else if (value == "5") {
                $(".fadeOut p").fadeOut(1000, "linear");
            } else if (value == "6") {
                $(".fadeOut p").fadeOut({
                    duration: 1000
                });
            }
        });

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity[oʊˈpæsəti] 属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1
fadeIn：淡入效果，内容显示，opacity是0到1
fadeOut：淡出效果，内容隐藏，opacity是1到0
如果要让元素保持动画效果，执行opacity = 0.5的效果时，要如何处理？

        如果不考虑CSS3，我们用JS实现的话，基本就是通过定时器，在设定的时间内一点点的修改opacity的值，最终为0.5，原理虽说简单，但是总不如一键设置这么舒服，jQuery提供了fadeTo方法，可以让改变透明度一步到位
        语法：fadeTo([[speed],opacity,[easing],[fn]])
            speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
            opacity:一个0至1之间表示透明度的数字。
            easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
            fn:在动画完成时执行的函数，每个元素执行一次。

$("#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.7, function () {//fadeTo(speed,opacity,fn)
            alert('完成');
        });
    }
});