Efectos jQuery - Deslizamiento


Los métodos de deslizamiento de jQuery deslizan elementos hacia arriba y hacia abajo.

Haga clic para deslizar hacia abajo/arriba el panel

Debido a que el tiempo es valioso, brindamos un aprendizaje rápido y fácil.

En W3Schools puedes estudiar todo lo que necesitas aprender, en un formato accesible y manejable.


Ejemplos


Demuestra el método jQuery slideDown().


Demuestra el método jQuery slideUp().


Demuestra el método jQuery slideToggle().


Métodos deslizantes de jQuery

Con jQuery puedes crear un efecto deslizante en los elementos.

jQuery tiene los siguientes métodos de diapositivas:

  • slideDown()
  • slideUp()
  • slideToggle()

Método jQuery slideDown()

El método jQuery slideDown()se usa para deslizar hacia abajo un elemento.

Sintaxis:

$(selector).slideDown(speed,callback);

El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "lento", "rápido" o milisegundos.

El parámetro de devolución de llamada opcional es una función que se ejecutará después de que se complete el deslizamiento.

El siguiente ejemplo demuestra el slideDown()método:

Ejemplo

$("#flip").click(function(){
  $("#panel").slideDown();
});


Método jQuery slideUp()

El método jQuery slideUp()se utiliza para deslizar hacia arriba un elemento.

Sintaxis:

$(selector).slideUp(speed,callback);

El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "lento", "rápido" o milisegundos.

El parámetro de devolución de llamada opcional es una función que se ejecutará después de que se complete el deslizamiento.

El siguiente ejemplo demuestra el slideUp()método:

Ejemplo

$("#flip").click(function(){
  $("#panel").slideUp();
});

Método jQuery slideToggle()

El método jQuery slideToggle()alterna entre los métodos slideDown()y .slideUp()

Si los elementos se han deslizado hacia abajo, slideToggle()los deslizará hacia arriba.

Si los elementos se han deslizado hacia arriba, slideToggle()los deslizará hacia abajo.

$(selector).slideToggle(speed,callback);

El parámetro de velocidad opcional puede tomar los siguientes valores: "lento", "rápido", milisegundos.

El parámetro de devolución de llamada opcional es una función que se ejecutará después de que se complete el deslizamiento.

El siguiente ejemplo demuestra el slideToggle()método:

Ejemplo

$("#flip").click(function(){
  $("#panel").slideToggle();
});

Ejercicios de jQuery

Ponte a prueba con ejercicios

Ejercicio:

Use un método jQuery para deslizar hacia arriba un elemento <div>.

$("div").();


Referencia de efectos de jQuery

Para obtener una descripción general completa de todos los efectos de jQuery, vaya a nuestra Referencia de efectos de jQuery .