El método fadeToggle() en jQuery alterna entre los métodos fadeIn() y fadeOut(). Si los elementos se desvanecen, fadeToggle() se desvanecerá. Si los elementos se desvanecen, fadeToggle() se desvanecerá.
Sintaxis:
$(selector).fadeToggle(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 fadeToggle().
Los siguientes ejemplos ilustran el método fadeToggle() en jQuery:
Ejemplo 1: Este ejemplo muestra el efecto del método fadeToggle() a una velocidad dada. La velocidad se puede establecer en términos de milisegundos.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery fadeToggle() Method
</title>
<style>
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<div id= "Outer">
<h1 style = "color:white;" >
GeeksForGeeks
</h1>
</div><br>
<button id = "btn">
Fade Toggle
</button>
<!-- Script to use fadeToggle() Method -->
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").fadeToggle(1000);
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic primero en el botón:
- Después del segundo clic en el botón:
Ejemplo 2: este ejemplo muestra el efecto del método fadeToggle() con aceleración de swing. La aceleración se utiliza para establecer la velocidad del elemento en diferentes puntos de la animación.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery fadeToggle() Method
</title>
<style>
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<div id= "Outer">
<h1 style = "color:white;" >
GeeksForGeeks
</h1>
</div><br>
<button id = "btn">
Fade Toggle
</button>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").fadeToggle("swing");
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic primero en el botón:
- Después del segundo clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA