El método slideToggle() en jQuery se usa para mostrar los elementos ocultos u ocultar los elementos visibles respectivamente, es decir, alterna entre los métodos slideUp() y slideDown().
- slideDown() se ejecuta cuando el elemento está oculto.
- slideUp() se ejecuta cuando el elemento está visible.
Sintaxis:
$(selector).slideToggle()( 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 slideToggle().
El siguiente ejemplo ilustra el método slideToggle() en jQuery:
Ejemplo: Este ejemplo muestra u oculta el elemento.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery slideToggle() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to illustrates slideToggle() method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("h1").slideToggle();
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<button>
Click on button to hide/show content
</button>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de un solo clic en el botón:
- Después de hacer doble clic en el botón: