Métodos de deslizamiento jQuery explicados

El fenómeno deslizante le permite deslizarse hacia arriba o deslizarse por los elementos DOM. A veces, se adjunta un panel con elementos que proporcionan información adicional. Estos paneles se deslizan hacia arriba/hacia abajo dependiendo del requisito.

JQuery admite tres métodos deslizantes que son slideUp (), slidtewn () y slidetoggle (). Los métodos slideUp () o slidtewn () deslizan los elementos en direcciones hacia arriba o hacia abajo respectivamente. Alternativamente, el método slidEtoggle () determina si el elemento está en el estado slideUp () o en slidewown (). Por ejemplo, si el elemento está en el estado slideUp (), entonces slidEtoggle () deslizará el elemento hacia abajo y viceversa.

Este artículo demuestra los métodos de deslizamiento jQuery en detalle y sirve los siguientes resultados de aprendizaje.

• Métodos de trabajo de slideUp (), slideown () y slidetoggle ()
• demostración de métodos de deslizamiento jQuery utilizando ejemplos

Cómo funcionan los métodos de deslizamiento jQuery

Esta sección proporciona el mecanismo de trabajo de los métodos de deslizamiento jQuery elaborando las sintaxis. Además, se proporciona un ejemplo que se refiere a cada método jQuery por separado. Explore los métodos de deslizamiento jQuery uno por uno.

Cómo usar el método slideUp ()

Este método desliza el elemento hacia arriba usando jQuery slideUp ().

Sintaxis

$ (selector).SlideUp (velocidad, devolución de llamada);

En la sintaxis anterior,

• el selector puede ser cualquier elemento o puede referirse al identificador de clase de un elemento
• el parámetro de velocidad decide qué tan rápido/lento se deslizará el elemento y los valores de velocidad puede ser lento, rápido o milisegundos (valor numérico)
• el llamar de vuelta es opcional y se usa para obtener algo de salida después de que se complete el deslizamiento

Ejemplo

Las siguientes líneas de código practican el método jQuery slideUp ().

El código se explica aquí

• el "remilgadoLa clase se refiere al panel principal (en el que depende el deslizamiento)
• el "segundoLa clase se usa para el panel secundario (que se deslizará hacia arriba)
• la velocidad deslizante se establece en "rápido"

Producción

Antes de deslizar

Después de deslizarse en la dirección ascendente

Cómo usar el método slidtewn ()

El método slidewown () desliza el elemento en la dirección hacia abajo.

Sintaxis

$ (selector).SlideDown (velocidad, devolución de llamada);

Ejemplo

El uso del método jQuery slidtewn () se muestra ejerciendo el siguiente código.

El código anterior se describe como,

• el ".principalSe crea la clase de párrafo y se usa como un elemento primario (utilizado para deslizar hacia abajo en el panel)
• el ".segundo"Se refiere a otro párrafo que se deslizará hacia abajo después de hacer clic en".principal"Párrafo de clase
• la velocidad del deslizamiento se establece en lento

Nota: El elemento que se deslizará hacia abajo debe tener la propiedad de visualización establecida en ninguno.

Producción

Antes de deslizarse hacia abajo

Al hacer clic, el párrafo (class = "segundo") Se deslizará hacia abajo como se muestra a continuación.

Cómo usar el método slidEtoggle ()

El slidetoggle () desliza por el elemento si el elemento está en un estado deslizante y si el elemento está en un estado deslizante, deslizaría el elemento en una dirección hacia abajo.

Sintaxis

$ (selector).slidEtoggle (velocidad, devolución de llamada);

Ejemplo

Para practicar el método jQuery slidetoggle (), utilizamos el siguiente código.

En el código anterior,

• el "remilgado"La clase representa el elemento primario (en el que depende el deslizamiento)
• el "segundo"La clase se refiere al elemento que se deslizará hacia arriba/hacia abajo
• el velocidad deslizante se establece en milisegundos (1000)

Producción

Antes de deslizar

Después de aplicar el método slidEtoggle ()

Si sigue haciendo clic en el elemento principal, el control deslizante seguirá cambiando su estado.

Conclusión

Para deslizar un elemento en dirección ascendente o hacia abajo, jQuery ofrece tres métodos: slideown (), slideUp () y slidetoggle (). Esta publicación descriptiva proporciona el uso y el uso de cada método deslizante. Se ejercen los métodos slidewown () y slideUp () para deslizar el elemento en direcciones hacia abajo y hacia arriba respectivamente. Por otro lado, el método SlidEtoggle () cambia el estado actual del elemento de deslizamiento a deslizamiento y viceversa.