En este artículo, veremos cómo crear un efecto fadeToggle usando jQuery. El efecto fadeToggle se puede crear usando el método fadeToggle() .
El método fadeToggle() se usa para alternar 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)
En el siguiente ejemplo, primero creamos un div de tamaño 250px X 200px y establecemos su propiedad de visualización en none. Además, creó un botón que llama al método fadeToggle(). Cuando el usuario hace clic en el botón, se llama al método fadeToggle() y se mostrará el elemento div y si se vuelve a hacer clic en el mismo botón, el elemento div desaparecerá.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div {
width: 250px;
height: 200px;
display: none;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
What is the purpose of fadeToggle()
method in JQuery?
</h3>
<div></div>
<br>
<button id="delay">Fade Toggle</button>
</center>
<script>
$(document).ready(function() {
$('#delay').click(function() {
$("div").fadeToggle(1000);
});
});
</script>
</body>
</html>
Producción:
