Métodos de deslizamento jQuery explicados

O fenômeno deslizante permite deslizar para cima ou deslizar para baixo os elementos DOM. Às vezes, um painel é anexado com elementos que fornecem informações adicionais. Esses painéis são deslizados para cima/para baixo, dependendo do requisito.

O jQuery suporta três métodos deslizantes que são slide -up (), slidown () e slidetoggle (). Os métodos slide -up () ou slidown () deslizam os elementos nas direções para cima ou para baixo, respectivamente. Como alternativa, o método slideToggle () determina se o elemento está no estado slide () ou em slidown (). Por exemplo, se o elemento estiver no estado slide (), então slidetoggle () deslizará o elemento para baixo e vice -versa.

Este artigo demonstra os métodos de deslizamento do jQuery em detalhes e serve os seguintes resultados de aprendizagem.

• Métodos Slide -Up (), Slidown () e SlideToggle ()
• Demonstração de métodos de deslizamento jQuery usando exemplos

Como funcionam os métodos de deslizamento do jQuery

Esta seção fornece o mecanismo de trabalho dos métodos de deslizamento jQuery, elaborando as sintaxes. Além disso, é fornecido um exemplo que se refere a cada método jQuery separadamente. Vamos explorar métodos deslizantes de jQuery um por um.

Como usar o método slide -up ()

Este método desliza o elemento para cima usando o jQuery slide -up ().

Sintaxe

$ (seletor).slidep (velocidade, retorno de chamada);

Na sintaxe acima,

• o Seletor pode ser qualquer elemento ou se referir ao classe/id de um elemento
• o parâmetro de velocidade decide o quão rápido/lento o elemento será deslizado e os valores de velocidade pode ser lento, rápido ou milissegundos (valor numérico)
• o ligar de volta é opcional e é usado para obter alguma saída após a conclusão do deslizamento

Exemplo

As seguintes linhas de código praticam o método jQuery slideup ().

O código é explicado aqui

• o "prim”A classe refere -se ao painel principal (no qual o deslizamento depende)
• o "Sec”A classe é usada para o painel secundário (que será deslizado)
• A velocidade deslizante está definida como “rápido““

Saída

Antes de deslizar

Depois de deslizar na direção ascendente

Como usar o método slidown ()

O método slidown () desliza o elemento na direção descendente.

Sintaxe

$ (seletor).arredora (velocidade, retorno de chamada);

Exemplo

O uso do método jQuery slidown () é mostrado através do exercício do seguinte código.

O código acima é descrito como,

• o ".principal”A classe de parágrafo é criada e é usada como um elemento primário (usado para deslizar pelo painel)
• o ".Sec“Refere -se a outro parágrafo que será deslizado depois de clicar em“.principal”Parágrafo da classe
• A velocidade do deslizamento é definida como lento

Observação: O elemento que será deslizado para baixo deve ter a propriedade de exibição definida como nenhum.

Saída

Antes de deslizar para baixo

Ao clicar, o parágrafo (class = ”Sec“) Será deslizado como mostrado abaixo.

Como usar o método slideToggle ()

O slidetoggle () desliza o elemento se o elemento estiver em um estado de descendente e se o elemento estiver em um estado de deslizamento, deslizaria o elemento em uma direção descendente.

Sintaxe

$ (seletor).slidetoggle (velocidade, retorno de chamada);

Exemplo

Para praticar o método jQuery slideToggle (), utilizamos o seguinte código.

No código acima,

• o "prim”Classe representa o elemento primário (do qual o deslizamento depende)
• o "Sec”Classe refere -se ao elemento que será deslizado para cima/para baixo
• o velocidade deslizante está definido em milissegundos (1000)

Saída

Antes de deslizar

Depois de aplicar o método slideToggle ()

Se você continuar clicando no elemento principal, o controle deslizante continuará mudando seu estado.

Conclusão

Para deslizar um elemento em uma direção para cima ou para baixo, o jQuery oferece três métodos: slidown (), slide -up () e slidetoggle (). Esta postagem descritiva fornece o trabalho e o uso de cada método deslizante. Os métodos slidown () e slide -up () são exercidos para deslizar o elemento nas direções para baixo e para cima, respectivamente. Por outro.