Efectos jQuery- Ocultar y mostrar

jQuery proporciona una interfaz simple para ejecutar varios efectos sorprendentes.

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

jQuery hide() y show()

Puede usarhide()yshow()Métodos para ocultar y mostrar elementos HTML.

El siguiente ejemplo muestra el uso de los métodos hide() y show()：

//　Ocultar párrafo normalmente visible
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　Mostrar párrafo oculto
$("#show-btn").click(function(){
　　$("p").show();
});

Esto eshide() Sintaxis del método：

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

Esto esshow()Sintaxis del método：

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

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

• duración -Determina cuándo se aplicará el efectoDuraciónCuánto tiempo. Los valores posibles: "lento", "rápido" o milisegundos

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

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

El siguiente ejemplo demuestra a través de hide() y show()duraciónParámetros：

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

El siguiente ejemplo utiliza hide() y show() para demostrarRetornoParámetros：

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIV se oculta");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIV se muestra");
　　});
});

animación de todo el rango (en este ejemplo, las palabras) se oculta rápidamente, en200 milisegundos para completar cada animación：

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

Método jQuery toggle()

También podemos usartoggle()El método cambia entre ocultar y mostrar elementos HTML.

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

El siguiente ejemplo oculta y muestra todos los elementos<p>Cambio entre elementos:

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

toggle()La sintaxis del método es la siguiente:

$(selector).toggle(duración, easing, callback);

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

• duración　 -Determina cuándo se aplicará el efectoDuraciónDurante cuánto tiempo. Valores posibles: "lento", "rápido" o milisegundos

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

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

Referencia de efectos de jQuery

Para obtener referencias completas de efectos, visite nuestraManual de referencia de jQuery Effects.