jQuery 效果 - 淡入淡出
jQuery提供了一个简单的界面来执行各种令人惊奇的效果。
jQuery效果方法使我们能够以最少的配置快速应用常用的效果。
jQuery淡入淡出方法
使用jQuery，我们可以实现淡入或淡出效果。
我们有以下jQuery淡入淡出方法：
下一节将向您展示如何使用每种淡入淡出方法。
jQuery fadeIn()和fadeOut()
jQuery fadeIn()方法逐渐将选定元素的不透明度从隐藏更改为可见。
jQuery fadeOut()方法逐渐将选定元素的不透明度从可见更改为隐藏。
以下示例演示了fadeIn()方法和fadeOut()方法的用法：
// 淡出显示的段落
$("#fadeout-btn").click(function(){
$("p").fadeOut();
});
// 淡入隐藏的段落
$("#fadein-btn").click(function(){
$("p").fadeIn();
});测试看看‹/›这是fadeIn()方法 的语法：
$(selector).fadeIn(duration, easing, callback);
这是fadeOut()方法 的语法：
$(selector).fadeOut(duration, easing, callback);
无论fadeIn()和fadeOut()方法接受三个可选参数：
duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定淡入淡出方法完成后要调用的函数
下面的示例演示了使用fadeIn()和fadeOut()的duration参数：
$("#fadeout-btn").click(function(){
$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
$("p").fadeIn(1500);
});测试看看‹/›下面的示例演示了带有fadeIn()和fadeOut()的回调参数：
$("#fadeout-btn").click(function(){
$("div").fadeOut(600, function(){
$("h3").text("淡出完成.");
});
});
$("#fadein-btn").click(function(){
$("div").fadeIn(600, function(){
$("h3").text("淡入完成.");
});
});测试看看‹/›对所有跨度（在这种情况下为单词）进行动画处理以使其快速褪色，并在200毫秒内完成每个动画处理：
$("button").click(function(){
$("span:last-child").fadeOut("fast", function(){
$(this).prev().fadeOut("fast", arguments.callee);
});
});测试看看‹/›jQuery fadeToggle()方法
我们还可以使用fadeToggle()方法在HTML元素的淡入和淡出之间切换。
如果所选元素淡出，fadeToggle()则将其淡入。
如果所选元素淡入，fadeToggle()将淡出它们。
以下示例在所有<p>元素的淡入和淡出之间切换：
$("button").click(function(){
$("p").fadeToggle();
});测试看看‹/›这是fadeToggle()方法 的语法：
$(selector).fadeToggle(duration, easing, callback);
该fadeToggle()方法接受三个可选参数：
duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定淡入淡出方法完成后要调用的函数
jQuery fadeTo()方法
jQuery fadeTo()方法逐渐将所选元素的不透明度更改为指定的不透明度。
注意：该fadeTo()方法不会更改页面的布局（所选元素仍将占用与以前相同的空间）。
此示例逐渐降低<div>元素的不透明度：
$("button").click(function(){
$("div").fadeTo(500, 0.2);
});测试看看‹/›这是fadeTo()方法 的语法：
$(selector)fadeTo.(duration, opacity, easing, callback)
参数：
duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
opacity-指定要淡入的不透明度。必须是介于0.00和1.00之间的数字
easing -（可选）指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-（可选）指定淡入淡出方法完成后要调用的函数
下面的示例演示了带有fadeTo()的回调参数：
$("button").click(function(){
$("div").fadeTo(500, 0, function(){
alert("透明度降低!!!");
});
});测试看看‹/›jQuery效果参考
有关完整的效果参考，请访问我们的jQuery Effects 参考手册。