返回值:jQueryfadeToggle([duration], [easing], [callback])

通过透明度动画来显示或隐藏匹配的元素。

.fadeOut() 方法对匹配元素的透明度生成动画效果。当透明度变成 0 之后，再把 display 样式属性设置成 none 以确保这个元素不再对页面布局产生影响。

duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 'fast' 和 'slow' ，分别对应了 200 和 600 毫秒。如果没有设置 duration 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。

缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：swing 和 linear。更多特效需要使用插件。可以访问 jQuery UI 网站 来获得更多信息。

如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 this 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。

示例:

第一段落渐隐或渐显，用时 600 毫秒，并且是线性缓冲效果。而第二个段落渐隐渐显用时 200 毫秒, 并且在每次动画完成后插入一个 "finished"。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>


<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>

<p>This paragraph has a fast animation.</p>
<div id="log"></div>


<script>


$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
  $("p:last").fadeToggle("fast", function () {
    $("#log").append("<div>finished</div>");
  });
});


</script>
</body>
</html>
演示: