Efeitos jQuery- Ocultar e exibir

jQuery fornece uma interface simples para executar vários efeitos impressionantes.

Métodos de efeito jQuery nos permitem implementar rapidamente e com pouca configuração efeitos comuns.

jQuery hide() e show()

Você pode usarhide()eshow()Métodos ocultar e exibir elementos HTML.

O seguinte exemplo demonstra o uso dos métodos hide() e show()：

//　Ocultar parágrafo visível
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　Exibir parágrafo ocultado
$("#show-btn").click(function(){
　　$("p").show();
});

Este éhide() Sintaxe do método：

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

Este éshow()Sintaxe do método：

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

hide()eshow()O método aceita três parâmetros opcionais:

• duration -Determina o efeito que seráDuraçãoQuantidade de tempo. Valores possíveis: "slow", "fast" ou milissegundos

• easing -Indica a função de suavização a ser usada para transições. Valores possíveis: "swing", "linear"

• callback-Função a ser chamada após a conclusão do método especificado

O seguinte exemplo demonstra hide() e show() através dedurationParâmetros：

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

O seguinte exemplo usa hide() e show() para demonstrarRetornoParâmetros：

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIV foi ocultado");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIV foi exibido");
　　});
});

ocultar rapidamente todos os intervalos de animação (no exemplo atual, palavras), em200 milissegundos para completar cada animação：

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

Método jQuery toggle()

Também podemos usartoggle()O método alternar entre ocultar e exibir elementos HTML.

Se o elemento selecionado estiver inicialmente visível, ele será ocultado; se estiver oculto, ele será exibido.

O exemplo a seguir oculta e mostra todos os elementos HTML ao clicar no botão<p>Alternância entre elementos:

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

toggle()A sintaxe do método é a seguinte:

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

toggle()O método aceita três parâmetros opcionais:

• duration　 -Determina o efeito que seráDuraçãoQuantas vezes. Valores possíveis: "slow", "fast" ou milissegundos

• easing -Indica a função de suavização a ser usada para transições. Valores possíveis: "swing", "linear"

• callback-Função a ser chamada após a conclusão do método especificado

Referência de Efeitos do jQuery

Para referências completas de efeitos, visite nossoManual do jQuery Effects。