Efectos jQuery - Deslizar

jQuery proporciona una interfaz simple para ejecutar una variedad de efectos asombrosos.

Los métodos de efectos jQuery nos permiten aplicar rápidamente efectos comunes con la menor configuración posible.

Métodos jQuery de deslizamiento

Con jQuery, podemos crear efectos de deslizamiento en los elementos.

Tenemos los siguientes métodos jQuery de diapositivas:

• slideUp()

• slideDown()

• slideToggle()

A continuación, le mostraremos cómo usar cada método de deslizamiento.

jQuery slideUp() y slideDown()

slideUp()Método para ocultar el elemento seleccionado de manera deslizante.

slideDown()Método para mostrar el elemento seleccionado de manera deslizante.

El siguiente ejemplo muestra el uso de métodos slideUp() y slideDown():

//　Deslizar el párrafo hacia arriba
　$("#btn1).click(function() {
　　　　　　$("p").slideUp();
});
//　Deslizar el párrafo hacia abajo
　$("#btn2).click(function() {
　　　　　　$("p").slideDown();
});

Esto esslideUp() Sintaxis del método:

$("selector").slideUp(duración, suavizado, callback);

Esto esslideDown()Sintaxis del método:

$("selector").slideDown(duración, suavizado, callback);

Sin importarslideUp()yslideDown()El método acepta tres parámetros opcionales:

• duration -Determina cuánto tiempo durará el efecto de deslizamiento. Los valores posibles son: "lento", "rápido" o milisegundos

• easing -Indica la función de suavizado a usar para la transición. Los valores posibles son: "swing", "linear"

• callback-Función a llamar después de que se complete el método de deslizamiento

El siguiente ejemplo muestra el uso de slideUp() y slideDown() condurationParámetros:

$("#btn1).click(function() {
　　$("p").slideUp(1500);
});
$("#btn2).click(function() {
　　$("p").slideDown(1500);
});

El siguiente ejemplo muestra el uso de slideUp() y slideDown() conCallbackParámetros:

$("#btn1).click(function() {
　　$("div").slideUp(1500, function() {
　　　　alert("¡La animación de deslizamiento hacia arriba se completó!");
　　});
});
$("#btn2).click(function() {
　　$("div").slideDown(1500, function() {
　　　　alert("¡La animación de deslizamiento hacia abajo se completó!");
　　});
});

Animar todos los spans (en este caso, palabras) para deslizar rápidamente, en200 milisegundos para completar cada animación:

$("button").click(function(){
　　$("span:last-child").slideUp("fast", function() {
　　　　$(this).prev().slideUp("fast", arguments.callee);
　　});
});

método jQuery slideToggle()

También podemos usarslideToggle()El método cambia entre los elementos HTML deslizándose hacia arriba y hacia abajo.

Si el elemento seleccionado se muestra inicialmente, se ocultará; si está oculto, se mostrará.

El siguiente ejemplo, al hacer clic en el botón, cambiará entre todos<p>Cambiar entre slideUp y slideDown de un elemento:

$("button").click(function(){
　　$("p").slideToggle(1500);
});

Esto esslideToggle()La sintaxis del método es:

$(selector).slideToggle(duration, easing, callback);

slideToggle()El método acepta tres parámetros opcionales:

• duration -Determina cuánto tiempo durará el efecto de deslizamiento. Los valores posibles son: "lento", "rápido" o milisegundos

• easing -Indica la función de suavizado a usar para la transición. Los valores posibles son: "swing", "linear"

• callback-Especificar una función a llamar después de que se complete el método slideToggle()

Referencia de efectos de jQuery

Para obtener referencias completas de efectos, visite nuestraManual de referencia de efectos de jQuery。