jQuery 效果 - 淡入淡出

jQuery提供了一个简单的界面来执行各种令人惊奇的效果。

jQuery效果方法使我们能够以最少的配置快速应用常用的效果。

jQuery淡入淡出方法

使用jQuery，我们可以实现淡入或淡出效果。

我们有以下jQuery淡入淡出方法：

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

下一节将向您展示如何使用每种淡入淡出方法。

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 参考手册。