Efeitos jQuery - Ocultar e Mostrar


Ocultar, Mostrar, Alternar, Deslizar, Desvanecer e Animar. UAU!

Clique para mostrar/ocultar painel

Como o tempo é valioso, oferecemos aprendizado rápido e fácil.

Na W3Schools, você pode estudar tudo o que precisa aprender, em um formato acessível e prático.


Exemplos


Demonstra um método simples de jQuery hide().


Outra demonstração de hide(). Como ocultar partes do texto.


jQuery hide() e show()

Com jQuery, você pode ocultar e mostrar elementos HTML com os métodos hide()e :show()

Exemplo

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Sintaxe:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

O parâmetro opcional de velocidade especifica a velocidade de ocultação/exibição e pode assumir os seguintes valores: "lento", "rápido" ou milissegundos.

O parâmetro opcional de retorno de chamada é uma função a ser executada após a conclusão do método hide()ou show()(você aprenderá mais sobre funções de retorno de chamada em um capítulo posterior).

O exemplo a seguir demonstra o parâmetro de velocidade com hide():

Exemplo

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


jQuery alternar()

Você também pode alternar entre ocultar e mostrar um elemento com o toggle()método.

Os elementos mostrados são ocultos e os elementos ocultos são mostrados:

Exemplo

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

Sintaxe:

$(selector).toggle(speed,callback);

O parâmetro de velocidade opcional pode assumir os seguintes valores: "lento", "rápido" ou milissegundos.

O parâmetro de retorno de chamada opcional é uma função a ser executada após toggle()a conclusão.


Exercícios de jQuery

Teste-se com exercícios

Exercício:

Use um método jQuery para ocultar um elemento <p> quando for clicado.

$("p").click(function(){
  $(this).();
});


Referência de efeitos jQuery

Para uma visão geral completa de todos os efeitos do jQuery, acesse nossa Referência de Efeitos do jQuery .