Efeitos do jQuery - Deslizar

O método de deslizar do jQuery permite que os elementos se movam verticalmente.

Demonstração de efeitos

Clique aqui para ocultar / mostrar painel

Um jaro de tempo é um jaro de ouro, portanto, oferecemos conteúdo de aprendizado rápido e fácil de entender.

Aqui, você pode obter qualquer conhecimento que precisar de uma maneira fácil e compreensível.

Exemplo

jQuery slideDown()
Demonstra o método jQuery slideDown()
jQuery slideUp()
Demonstra o método jQuery slideUp()
jQuery slideToggle()
Demonstra o método jQuery slideToggle()

Métodos de deslizamento jQuery

Através do jQuery, você pode criar efeitos de deslizamento em elementos.

O jQuery possui os seguintes métodos de deslizamento:

  • slideDown()
  • slideUp()
  • slideToggle()

Método jQuery slideDown()

O método jQuery slideDown() é usado para deslizar elementos para baixo.

Sintaxe:

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

O parâmetro opcional speed define a duração do efeito. Pode ser um dos seguintes valores: "slow", "fast" ou milissegundos.

O parâmetro opcional callback é o nome da função a ser executada após a conclusão do deslizamento.

Os exemplos a seguir demonstram o método slideDown():

Exemplo

$("#flip").click(function(){
  $("#panel").slideDown();
});

Experimente você mesmo

Método jQuery slideUp()

O método jQuery slideUp() é usado para deslizar elementos para cima.

Sintaxe:

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

Opcional speed O parâmetro define a duração do efeito. Pode ser um dos seguintes valores: "slow", "fast" ou milissegundos.

Opcional callback O parâmetro é o nome da função a ser executada após a conclusão do deslizamento.

Os exemplos a seguir demonstram o método slideUp():

Exemplo

$("#flip").click(function(){
  $("#panel").slideUp();
});

Experimente você mesmo

Método jQuery slideToggle()

O método jQuery slideToggle() pode alternar entre os métodos slideDown() e slideUp().

Se o elemento se deslizar para baixo, o slideToggle() pode deslizar para cima.

Se o elemento se deslizar para cima, o slideToggle() pode deslizar para baixo.

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

Opcional speed O parâmetro define a duração do efeito. Pode ser um dos seguintes valores: "slow", "fast" ou milissegundos.

Opcional callback O parâmetro é o nome da função a ser executada após a conclusão do deslizamento.

Os exemplos a seguir demonstram o método slideToggle():

Exemplo

$("#flip").click(function(){
  $("#panel").slideToggle();
});

Experimente você mesmo

Manual de Referência de Efeitos jQuery

Para consultar os efeitos jQuery em profundidade, acesse nossa Manual de Referência de Efeitos jQuery。