Tutorial básico de jQuery

Efectos jQuery

El método slideDown() muestra el elemento seleccionado de manera deslizante.

Nota:Este método es adecuado para elementos ocultados con métodos jQuery y display:none en CSS (no visibility:hidden).

Este método se usa generalmente conslideUp()Métodos juntos.

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

Al hacer clic en "#my-Div” en este ejemplo muestra " .panel" en la página:

Ejemplo

$("#my-Div").click(function(){
　　$(".panel").slideDown();
});

Deslizar hacia abajo todos los elementos <p> al hacer clic en el botón:

Ejemplo

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

UsardurationParámetros:

Ejemplo

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

UsarcallbackParámetros:

Ejemplo

$("button").click(function(){
　　$("div").slideDown(1500, function(){
　　　　alert("¡Desplazamiento hacia abajo completado!");
　　});
});

Usar tiempo de duración lento y suavizado lineal para deslizar hacia abajo todos los " .panel":

Ejemplo

$("#my-Div").click(function(){
　　$(".panel").slideDown("slow", "linear");
});

Animar todos los intervalos (en este ejemplo, palabras) para deslizar rápidamente en2Completar cada animación en 00 milisegundos:

Ejemplo

$("button").click(function(){
　　$("span:first-child").slideDown("fast", function(){
　　　　$(this).next().slideDown("fast", arguments.callee);
　　});
});

Parámetros	Descripción
duration	（Opcional）Determina cuánto tiempo durará el efecto de deslizamiento. El valor predeterminado es400 milisegundos Valores posibles: milisegundos (por ejemplo100,500,2000, etc.) “fast” “slow”
easing	（Opcional）Una cadena que especifica la velocidad del elemento en diferentes puntos del animación. El valor predeterminado es “ swing” Valores posibles: “swing”-Al comenzar/Moverse más lentamente al final y más rápido en el medio “linear”-Mover a una velocidad constante
callback	（Opcional）Una función que se llamará una vez que se complete el método slideDown(), para cada elemento seleccionado