Efectos de jQuery - Fade in y fade out

jQuery proporciona una interfaz simple para ejecutar una variedad de efectos sorprendentes.

Los métodos de efecto de jQuery nos permiten aplicar efectos comunes de manera rápida con la menor configuración posible.

Métodos de fade in y fade out de jQuery

Con jQuery, podemos lograr efectos de fade in y fade out.

Tenemos los siguientes métodos de fade in y fade out de jQuery:

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

La siguiente sección le mostrará cómo usar cada método de fade in y fade out.

jQuery fadeIn() y fadeOut()

jQuery fadeIn()El método cambia gradualmente la opacidad del elemento seleccionado de invisible a visible.

jQuery fadeOut()El método cambia gradualmente la opacidad del elemento seleccionado de visible a invisible.

El siguiente ejemplo muestra el uso de los métodos fadeIn() y fadeOut().

//　Poco a poco, la sección visible se hace invisible.
$("#fadeout-btn").click(function(){
　　$("p").fadeOut();
});
//　Poco a poco, la sección oculta se hace visible.
$("#fadein-btn").click(function(){
　　$("p").fadeIn();
});

这是fadeIn()方法的语法：

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

这是fadeOut()方法的语法：

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

无论fadeIn()和fadeOut()方法接受三个可选参数：

• duration -Determinar que el efecto de desvanecer y aparecerDuraciónTiempo. Valores posibles: "lento", "rápido" o milisegundos

• easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”

• callback-指定淡入淡出方法完成后要调用的函数

下面的示例演示了使用fadeIn()和fadeOut()的durationParámetros:

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

下面的示例演示了带有fadeIn()和fadeOut()的CallbackParámetros:

$("#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 -Determinar que el efecto de desvanecer y aparecerDuraciónTiempo. Valores posibles: "lento", "rápido" o milisegundos

• 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)

Parámetros:

• duration -Determinar que el efecto de desvanecer y aparecerDuraciónTiempo. Valores posibles: "lento", "rápido" o milisegundos

• opacidad-Especificar la opacidad a la que se desvanecerá. Debe estar entre .00 y1Número entre .00

• easing -（Opcional）Indica la función de suavizado a usar para la transición. Valores posibles: "swing", "linear"

• callback-（Opcional）Especificar la función a llamar después de que se complete el método de desvanecer y aparecer

El siguiente ejemplo muestra un fadeTo()CallbackParámetros:

$("button").click(function(){
　　$("div").fadeTo(500, 0, function(){
　　　　alert("¡Transparencia reducida!!!");
　　});
});

Referencia de efectos de jQuery

Para obtener referencias completas de efectos, visite nuestraManual de referencia de jQuery Effects。