Efeitos jQuery - Deslizar

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

Os métodos de efeito jQuery nos permitem aplicar rapidamente efeitos comuns com a menor configuração.

Métodos jQuery de deslizar

Com jQuery, podemos criar efeitos de deslizar em elementos.

Temos os seguintes métodos jQuery de slide:

• slideUp()

• slideDown()

• slideToggle()

A seguir, mostraremos como usar cada método de deslizar.

jQuery slideUp() e slideDown()

slideUp()O método oculta o elemento selecionado de forma deslizante.

slideDown()O método exibe o elemento selecionado de forma deslizante.

O exemplo a seguir demonstra o uso dos métodos slideUp() e slideDown():

//　Deslizar para cima do parágrafo
　$("#btn1).click(function(){
　　　　　　$("p").slideUp();
});
//　Deslizar para baixo do parágrafo
　$("#btn2).click(function(){
　　　　　　$("p").slideDown();
});

Este éslideUp() A sintaxe do método é:

$("selector").slideUp(duracao, suavizacao, callback);

Este éslideDown()A sintaxe do método é:

$("selector").slideDown(duracao, suavizacao, callback);

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

• duration -Determina quanto tempo o efeito de deslizar será executado. 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 de deslizar.

O exemplo a seguir demonstra o uso de slideUp() e slideDown() comdurationParâmetros:

$("#btn1).click(function(){
　　$("p").slideUp(1500);
});
$("#btn2).click(function(){
　　$("p").slideDown(1500);
});

O exemplo a seguir demonstra o uso de slideUp() e slideDown() comCallbackParâmetros:

$("#btn1).click(function(){
　　$("div").slideUp(1500, function(){
　　　　alert("A deslizar para cima foi concluída!");
　　});
});
$("#btn2).click(function(){
　　$("div").slideDown(1500, function(){
　　　　alert("A deslizar para baixo foi concluída!");
　　});
});

animar todos os spans (neste caso, palavras) para deslizar rapidamente, em2concluída cada animação em 00 milissegundos:

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

método jQuery slideToggle()

Também podemos usarslideToggle()O método alternar entre elementos HTML ao deslizar para cima e para baixo.

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

O exemplo a seguir, ao clicar no botão, alternará entre todos<p>Alternar entre slideUp e slideDown do elemento:

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

Este éslideToggle()Sintaxe do método:

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

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

• duration -Determina quanto tempo o efeito de deslizar será executado. 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-Especificar uma função a ser chamada após a conclusão do método slideToggle()

Referência de efeitos do jQuery

Para referências completas de efeitos, acesse nossoManual de referência de efeitos do jQuery。