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(время, сглаживание, обратная функция);

независимо отfadeIn()иfadeOut()Метод принимает три опциональных параметра:

• duration - Определяет, будет ли эффект fadeTo()ДлительностьСколько времени. Возможные значения: "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("быстро", function() {
　　　　$("this").prev().fadeOut("быстро", arguments.callee);
　　});
});

метод fadeToggle() jQuery

Мы также можем использоватьfadeToggle()Метод переключает между заливкой и исчезновением HTML-элемента.

Если элемент исчезает,fadeToggle()то его заливают.

Если элемент заливается,fadeToggle()исчезают.

Следующий пример исчезает на всех<p>Переключение между заливкой и исчезновением элемента:

$("button").click(function(){
　　$("p").fadeToggle();
});

ЭтоfadeToggle()Синтаксис метода:

$("selector").fadeToggle(время, сглаживание, обратная функция);

ЭтотfadeToggle()Метод принимает три опциональных параметра:

• duration - Определяет, будет ли эффект fadeTo()ДлительностьСколько времени. Возможные значения: "slow", "fast" или миллисекунды

• easing - указать функцию сглаживания, используемую для перехода. Возможные значения: "swing", "linear"

• callback-Указать функцию, которую нужно вызвать после завершения перехода

Метод fadeTo() jQuery

jQuery fadeTo()Метод постепенно изменяет непрозрачность выбранного элемента на указанную непрозрачность.

Внимание:ЭтотfadeTo()Метод не изменяет макет страницы (выбранный элемент все еще будет занимать такое же пространство, как и раньше).

Этот пример постепенно уменьшает<div>Непрозрачность элемента:

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

ЭтоfadeTo()Синтаксис метода:

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

Параметры:

• duration - Определяет, будет ли эффект fadeTo()ДлительностьСколько времени. Возможные значения: "slow", "fast" или миллисекунды

• opacity-Указывает непрозрачность, к которой нужно перейти. Это должно быть число между 0.00 и 1.00

• easing - (по умолчанию) Указывает функцию анимации. Возможные значения: "swing", "linear"

• callback-(по умолчанию) Указывает функцию, которую нужно вызвать после завершения анимации.

Ниже приведен пример с fadeTo()КаллбэкПараметры:

$("button").click(function(){
　　$("div").fadeTo(500, 0, function(){
　　　　alert("Уровень прозрачности снижен!!!");
　　});
});

Руководство по эффектам jQuery

Для полных эффектов, пожалуйста, посетите нашРуководство по эффектам jQuery.