返回值:jQueryfadeToggle([duration], [easing], [callback])
通过透明度动画来显示或隐藏匹配的元素。
-
1.4.4 新增fadeToggle([duration], [easing], [callback])
duration (String,Number) 可选参数,字符串("slow"或 "fast")或表示动画时长的毫秒数值easing (String) 可选参数,要使用的缓冲效果的名称,默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果,如果要使用更多缓冲效果,需要插件支持。callback (Function) 可选参数,在动画完成时执行的函数。
.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>