Con jQuery puede desvanecerse elementos dentro y fuera de la visibilidad.
Haga clic para fade in / out del panel
Porque el tiempo es valioso, ofrecemos un aprendizaje rápido y fácil.
En w3ii , se puede estudiar todo lo necesario para aprender, en un formato accesible y práctico.
Ejemplos
jQuery fadeIn()
Demuestra el jQuery fadeIn() método.
jQuery fadeOut()
Demuestra el jQuery fadeOut() método.
jQuery fadeToggle()
Demuestra el jQuery fadeToggle() método.
jQuery fadeTo()
Demuestra el jQuery fadeTo() método.
Métodos Fading jQuery
Con jQuery puede desaparecer un elemento dentro y fuera de la visibilidad.
jQuery tiene los siguientes métodos de fundido:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() Método
El jQuery fadeIn() método se utiliza para desvanecerse en un elemento oculto.
Sintaxis:
$(selector).fadeIn(speed,callback);El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "slow", "fast" , o milisegundos.
El parámetro callback opcional es una función a ejecutar después de la decoloración completa.
El siguiente ejemplo demuestra la fadeIn() método con diferentes parámetros:
Ejemplo
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
}); Inténtalo tú mismo " jQuery fadeOut() Método
El jQuery fadeOut() método se utiliza a desaparecer un elemento visible.
Sintaxis:
$(selector).fadeOut(speed,callback);El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "slow", "fast" , o milisegundos.
El parámetro callback opcional es una función a ejecutar después de la decoloración completa.
El siguiente ejemplo demuestra la fadeOut() método con diferentes parámetros:
Ejemplo
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
}); Inténtalo tú mismo " jQuery fadeToggle() Método
El jQuery fadeToggle() método alterna entre la fadeIn() y fadeOut() métodos.
Si los elementos se desvanecieron, fadeToggle() se desvanecerá en.
Si los elementos se desvanecieron en, fadeToggle() se desvanecerá a cabo.
Sintaxis:
$(selector).fadeToggle(speed,callback);El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "slow", "fast" , o milisegundos.
El parámetro callback opcional es una función a ejecutar después de la decoloración completa.
El siguiente ejemplo demuestra la fadeToggle() método con diferentes parámetros:
Ejemplo
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}); Inténtalo tú mismo " jQuery fadeTo() Método
El jQuery fadeTo() método permite la decoloración de una opacidad dada (valor entre 0 y 1).
Sintaxis:
$(selector).fadeTo(speed,opacity,callback);El parámetro de velocidad requerida especifica la duración del efecto. Puede tomar los siguientes valores: "slow", "fast" , o milisegundos.
El parámetro de opacidad requerida en el fadeTo() método especifica la decoloración a una opacidad dada (valor entre 0 y 1).
El parámetro callback opcional es una función a ejecutar después de la función completa.
El siguiente ejemplo demuestra la fadeTo() método con diferentes parámetros:
Ejemplo
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
}); Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
jQuery Referencia de efectos
Para una visión completa de todos los efectos jQuery, por favor vaya a nuestra jQuery Efecto de referencia .