jQuery 效果 - 淡入淡出

jQuery提供了一個(gè)簡(jiǎn)單的界面來執(zhí)行各種令人驚奇的效果。

jQuery效果方法使我們能夠以最少的配置快速應(yīng)用常用的效果。

jQuery淡入淡出方法

使用jQuery，我們可以實(shí)現(xiàn)淡入或淡出效果。

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

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

下一節(jié)將向您展示如何使用每種淡入淡出方法。

jQuery fadeIn()和fadeOut()

jQuery fadeIn()方法逐漸將選定元素的不透明度從隱藏更改為可見。

jQuery fadeOut()方法逐漸將選定元素的不透明度從可見更改為隱藏。

以下示例演示了fadeIn()方法和fadeOut()方法的用法：

// 淡出顯示的段落
$("#fadeout-btn").click(function(){
  $("p").fadeOut();
});

// 淡入隱藏的段落
$("#fadein-btn").click(function(){
  $("p").fadeIn();
});

這是fadeIn()方法 的語(yǔ)法：

$(selector).fadeIn(duration, easing, callback);

這是fadeOut()方法 的語(yǔ)法：

$(selector).fadeOut(duration, easing, callback);

無論fadeIn()和fadeOut()方法接受三個(gè)可選參數(shù)：

• duration -確定淡入淡出效果將持續(xù)多長(zhǎng)時(shí)間?？赡艿闹担骸?slow”，“ fast”或毫秒

• easing -指示要用于過渡的緩動(dòng)功能?？赡艿闹担骸?swing”，“ linear”

• callback-指定淡入淡出方法完成后要調(diào)用的函數(shù)

下面的示例演示了使用fadeIn()和fadeOut()的duration參數(shù)：

$("#fadeout-btn").click(function(){
  $("p").fadeOut(1500);
});

$("#fadein-btn").click(function(){
  $("p").fadeIn(1500);
});

下面的示例演示了帶有fadeIn()和fadeOut()的回調(diào)參數(shù)：

$("#fadeout-btn").click(function(){
  $("div").fadeOut(600, function(){
    $("h3").text("淡出完成.");
  });
});

$("#fadein-btn").click(function(){
  $("div").fadeIn(600, function(){
    $("h3").text("淡入完成.");
  });
});

對(duì)所有跨度（在這種情況下為單詞）進(jìn)行動(dòng)畫處理以使其快速褪色，并在200毫秒內(nèi)完成每個(gè)動(dòng)畫處理：

$("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()方法 的語(yǔ)法：

$(selector).fadeToggle(duration, easing, callback);

該fadeToggle()方法接受三個(gè)可選參數(shù)：

• duration -確定淡入淡出效果將持續(xù)多長(zhǎng)時(shí)間?？赡艿闹担骸?slow”，“ fast”或毫秒

• easing -指示要用于過渡的緩動(dòng)功能?？赡艿闹担骸?swing”，“ linear”

• callback-指定淡入淡出方法完成后要調(diào)用的函數(shù)

jQuery fadeTo()方法

jQuery fadeTo()方法逐漸將所選元素的不透明度更改為指定的不透明度。

注意：該fadeTo()方法不會(huì)更改頁(yè)面的布局（所選元素仍將占用與以前相同的空間）。

此示例逐漸降低<div>元素的不透明度：

$("button").click(function(){
  $("div").fadeTo(500, 0.2);
});

這是fadeTo()方法 的語(yǔ)法：

$(selector)fadeTo.(duration, opacity, easing, callback)

參數(shù)：

• duration -確定淡入淡出效果將持續(xù)多長(zhǎng)時(shí)間?？赡艿闹担骸?slow”，“ fast”或毫秒

• opacity-指定要淡入的不透明度。必須是介于0.00和1.00之間的數(shù)字

• easing -（可選）指示要用于過渡的緩動(dòng)功能?？赡艿闹担骸?swing”，“ linear”

• callback-（可選）指定淡入淡出方法完成后要調(diào)用的函數(shù)

下面的示例演示了帶有fadeTo()的回調(diào)參數(shù)：

$("button").click(function(){
  $("div").fadeTo(500, 0, function(){
    alert("透明度降低!!!");
  });
});

jQuery效果參考

有關(guān)完整的效果參考，請(qǐng)?jiān)L問我們的jQuery Effects 參考手冊(cè)。