Efeitos jQuery - Animação

jQuery nos permite criar animações personalizadas.

Animação jQuery-método animate()

jQuery animate()O método realiza animação personalizada em um grupo de atributos CSS.

Este éanimate()Sintaxe do método:

$(selector).animate({styles},　duration,　easing,　callback)

Parâmetros:

• {styles} -Especificar o objeto CSS do atributo e valor para o qual a animação se moverá

• duration -Determinar o tempo de execução do efeito de animação. Valores possíveis: "slow", "fast" ou milissegundos

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

• callback-Especificar a função a ser chamada após a conclusão do método animate()

A seguinte exemplo altera a largura do elemento para definir animação:

$("button").click(function(){
　　$("div").animate({width:　"}500px''});
});

O exemplo a seguir anima o elemento através da alteração da posição do elemento:

$("button").click(function(){
　　$("div").animate({left: ''500px''});
});

animate() do jQuery-Definição de várias propriedades

Podemos definir animação para várias propriedades de um elemento ao mesmo tempo.

$("button").click(function(){
　　$("div").animate({
　　　　width: ''500px'',
　　　　height: ''400px'',
　　　　opacity: ''0.3,
　　　　left: ''50px''
　　});
});

O exemplo a seguir demonstra usando animate():durationeeasingParâmetros:

$("button").click(function(){
　　$("div").animate({
　　　　width: ''500px'',
　　　　height: ''400px''
　　},　4000, ''linear'');
});

O exemplo a seguir demonstra usando animate():CallbackParâmetros:

$("button").click(function(){
　　$("div").animate({
　　　　width: ''500px'',
　　　　height: ''400px''
　　},　500, ''linear'',
　　function() {
　　　　$("this").after("<h2>A animação foi concluída</h2''
　　});
});

animate() do jQuery-Uso de animação em fila

Por padrão, o jQuery tem a função de fila de animação.

Dentro da fila, uma ou mais funções esperam ser executadas.

Isso significa que, se você escrever várias chamadas de animate() uma após a outra, o jQuery criará uma "fila interna" usando esses métodos. Em seguida, ele executará chamadas de animação uma por uma.

O exemplo a seguir altera primeiro a largura do elemento DIV, então a altura e, em seguida, aumenta o tamanho da fonte do texto:

$("button").click(function(){
　　let div = $("div");
　　div.animate({width: ''500px''});
　　div.animate({height: ''200px''});
　　div.animate({fontSize: ''10em''});
});

Podemos usar a função de link do jQuery para animar várias propriedades de um elemento em uma fila uma após a outra.

$("button").click(function(){
　　$("div")
　　　　.animate({width: ''500px''})
　　　　.animate({height: ''200px''})
　　　　.animate({fontSize: ''10em"})
　　　　.animate({opacity: 0.3});
});

Você vai aprender mais sobre links na parte posterior deste tutorial.

animate() do jQuery-Uso de Valores Relativos

Os atributos de animação também podem ser relativos. Se um valor for fornecido com um prefixo+ou-Se for fornecido um caractere de igualdade, a valor alvo é calculado adicionando ou subtraindo o número dado do valor atual da propriedade.

$("p").click(function(){
　　$(this).animate({
　　　　fontSize: ""+=5px",
　　　　padding: ""+=10px"
　　});
});

animate() do jQuery-Uso de Valores Pré-definidos

Além disso, podemos especificar o valor de animação da propriedade "show", "hide" ou "toggle":

$("button").click(function(){
　　$("div").animate({height: "toggle"});
});

Referência de Efeito do jQuery

Para referências completas de efeitos, acesse nossoManual de Referência de Efeito do jQuery.