slideToggle () es un método en jQuery que es una alternativa para dos métodos separados, a saber, slideUp() y slideDown() .
Esto en realidad juega con la propiedad de visualización CSS del elemento y le proporciona una ligera animación. Si el elemento tiene una » pantalla: ninguno «, la funcionalidad slideDown() se alterna, y si la pantalla está configurada en cualquier otra propiedad, slideUp() entra en escena.
Sintaxis:
$(<selector>).slideToggle(<speed>,<ease_property>,<function>);
Parámetros: se pueden pasar varios parámetros a la función, como la velocidad de la animación, el tipo de propiedad de aceleración (oscilación y lineal) y la función de devolución de llamada.
- velocidad: el valor predeterminado del parámetro de velocidad es 400 milisegundos. Este es un parámetro opcional. Otras opciones son “rápido” y “lento”.
- Ease_property: La propiedad por defecto es «swing» y «linear». Este también es un parámetro opcional.
- callback_function: Esto tiene que ser definido por el usuario y este también es un parámetro opcional.
Ejemplo 1: El siguiente ejemplo demuestra el método slideToggle() .
HTML
<!DOCTYPE html>
<html>
<head>
<title>slideToggle functionality</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<button id="slide-toggle">toggle</button>
<h1 id="textbox">geeksforgeeks.org</h1>
<script>
$("#slide-toggle").on("click", function () {
$("#textbox").slideToggle();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código de ejemplo demuestra el uso de parámetros en el método slideToggle() .
HTML
<!DOCTYPE html>
<html>
<head>
<title>slideToggle functionality</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<button id="slide-toggle">toggle</button>
<h1 id="textbox">geeksforgeeks.org</h1>
<script>
$("#slide-toggle").on("click", function () {
$("#textbox").slideToggle(3000, "swing", function () {
alert("slide toggle clicked");
});
});
</script>
</body>
</html>
Producción:
Así es como funciona la función slideToggle() y generalmente son útiles para sitios web que funcionan normalmente. Esta función no es muy útil si queremos crear una estética ya que la animación no es muy fluida.