El método fadeOut() en jQuery se usa para cambiar el nivel de opacidad del elemento seleccionado de visible a oculto. Al usar este método, el elemento desvanecido no ocupará ningún espacio.
Sintaxis:
$(selector).fadeOut( speed, easing, callback )
Parámetros: este método acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- Velocidad: es un parámetro opcional y se usa para especificar la velocidad del efecto de desvanecimiento. El valor predeterminado de velocidad es 400 milisegundos. Los posibles valores de la velocidad son:
- milisegundos
- «lento»
- «rápido»
- Easing: es un parámetro opcional y se usa para especificar la velocidad del elemento en diferentes puntos de la animación. El valor predeterminado de aceleración es «swing». Los posibles valores de la aceleración son:
- «ritmo»
- «lineal»
- devolución de llamada: es un parámetro opcional. La función de devolución de llamada se ejecuta después de que se completa el método fadeOut().
Ejemplo 1: Este ejemplo muestra el efecto fadeIn y fadeOut.
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery | fadeOut() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>jQuery | fadeOut() Method</h2>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<!-- Script to display fadeIn and fadeOut effect -->
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("h2").fadeOut()
});
$(".btn2").click(function(){
$("h2").fadeIn();
});
});
</script>
</body>
</html>
Producción
Ejemplo 2: Este ejemplo crea el efecto fadeIn y fadeOut y establece su velocidad. La velocidad dada en términos de milisegundos.
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery | fadeOut() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>jQuery | fadeOut() Method</h2>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("h2").fadeOut(1000);
});
$(".btn2").click(function(){
$("h2").fadeIn(1000);
});
});
</script>
</body>
</html>
Salida: después de hacer clic en el botón de desvanecimiento
Después de hacer clic en el botón de aparición gradual
Ejemplo 3: Cree un efecto de entrada y salida gradual con un mensaje de alerta.
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery | fadeOut() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>jQuery | fadeOut() Method</h2>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<!-- Script to create fadeIn and fadeOut effect -->
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("h2").fadeOut(1000, function() {
alert("fadeOut() method is finished!");
});
});
$(".btn2").click(function() {
$("h2").fadeIn(1000, function(){
alert("fadeIn() method is finished!");
});
});
});
</script>
</body>
</html>
Salida: después de hacer clic en el botón de desvanecimiento
Después de hacer clic en el botón de aparición gradual
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA