在jQuery中，如果想要实现元素的淡入与淡出的渐变效果，有以下3种方式。

  • （1）fadeIn()和fadeOut()
  • （2）fadeToggle()
  • （3）fadeTo()

一、fadeIn()和fadeOut()

在jQuery中，我们可以使用fadeIn()方法来实现元素的淡入效果，可以使用fadeOut()方法来实现元素的淡出效果。一般情况下，fadeIn()和fadeOut()这两个方法都是配合一起使用的。

语法：

$().fadeIn(speed, fn)
$().fadeOut(speed, fn)

说明：

speed是一个必选参数，表示动画的速度，单位为毫秒，默认为400毫秒。如果省略，则表示采用默认速度。speed有两种取值：一种是“字符串”；另外一种是“数值”，如下表所示。

speed取值为字符串
取值 说明
"fast" 200毫秒
"normal" 400毫秒（默认值）
"slow" 600毫秒

fn也是一个可选参数，表示动画执行完成后的回调函数。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn_hide").click(function(){
                $("img").fadeOut();
            })
            $("#btn_show").click(function () {
                $("img").fadeIn();
            })
        })
    </script>
</head>
<body>
    <input id="btn_hide" type="button" value="淡出" />
    <input id="btn_show" type="button" value="淡入" /><br/>
    <img src="img/jquery.png" alt=""/>
</body>
</html>

浏览器预览效果如下图所示。

分析：

可能有些小伙伴会发现，淡入淡出效果跟带动画的显示隐藏效果几乎是一模一样的。确实，这两种方式很相似。但是我们不要被其表面给蒙蔽了双眼，实际上这两种方式还是有一定区别的。

show()与hide()：通过改变height、width、opacity、display来实现元素的显示与隐藏。

fadeIn()与fadeOut()：通过改变opacity、display来实现元素的显示与隐藏。

此外，这两种方式在视觉上也有一定的区别，例如，hide()方法是慢慢缩小来隐藏元素，而fadeOut()是整体淡化直至消失。

二、fadeToggle()

在jQuery中，我们还可以使用fadeToggle()方法来“切换”元素的显示状态。也就是说，如果元素是显示状态，则会淡出；如果元素是隐藏状态，则会淡入。

语法：

$().fadeToggle(speed, fn)

说明：

speed是一个可选参数，表示动画的速度，单位为毫秒，默认为400毫秒。如果省略，则表示采用默认速度。speed有两种取值：一种是“字符串”；另外一种是“数值”，如下表所示。

speed取值为字符串
取值 说明
"fast" 200毫秒
"normal" 400毫秒（默认值）
"slow" 600毫秒

fn也是一个可选参数，表示动画执行完成后的回调函数。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function(){
                $("img").fadeToggle();
            })
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="切换" /><br/>
    <img src="img/jquery.png" alt=""/>
</body>
</html>

浏览器预览效果如下图所示。

分析：

从这个例子可以看出，使用fadeToggle()方法来切换元素的显示状态，比fadeIn()和fadeOut()这两个方法更加简单方便。

三、fadeTo()

在淡入效果中，透明度（opacity属性）是从0变化到1。在淡出效果中，透明度是从1变化到0的。在jQuery中，如果想要将元素透明度指定到0~1之间的某个值，可以使用fadeTo()方法。

语法：

$().fadeTo(speed, opacity, fn)

说明：

speed是一个可选参数，表示动画的速度，单位为毫秒，默认为400毫秒。如果省略，则表示采用默认速度。speed有两种取值：一种是“字符串”；另外一种是“数值”，如下表所示。

speed取值为字符串
取值 说明
"fast" 200毫秒
"normal" 400毫秒（默认值）
"slow" 600毫秒

opacity是一个必选参数，表示元素指定的透明度，取值范围为0.0~1.0。

fn也是一个可选参数，表示动画执行完成后的回调函数。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("img").hover(function () {
                $(this).fadeTo(200, 0.6);
            }, function () {
                $(this).fadeTo(200, 1.0);
            })
        })
    </script>
</head>
<body>
    <img src="img/jquery.png" alt=""/>
</body>
</html>

浏览器预览效果如下图所示：

分析：

fadeTo()方法只会把元素的透明度改变为某个值，并不会隐藏元素。