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