jQuery e Animações
jQuery e Animações
jQuery e Animações é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 1 aulas no total.
Introdução
Olá,
Nesta seção, aprenderemos animações com jQuery.
Vamos começar.
método show - hide
métodos show() e hide()
Podemos exibir e ocultar um objeto DOM na tela com os métodos show e hide.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>método toggle
método toggle()
Além desses, existe o método toggle(), cujo funcionamento podemos deduzir pelo nome. Com esse método, se o elemento estiver oculto, ele será exibido. Se estiver visível, será ocultado.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>fadein e fadeout
métodos fadeIn() e fadeOut()
Agora vamos ver os métodos fadeIn e fadeOut, que exibem e ocultam elementos HTML com animação.
Opcionalmente, os métodos fadeIn e fadeOut recebem um valor numérico em milissegundos. Esse valor determina quantos milissegundos a animação levará. Se não passarmos um argumento, será usado o valor padrão.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadein e fadeout
fadeOut reduz a opacidade dos elementos durante determinado período. Quando a opacidade chega a 0, a propriedade display passa a ser none.
É a versão do método hide() que aprendemos acima, com suporte à animação da opacidade.
FadeIn é o oposto do método fadeOut.
método fadeToggle
método fadeToggle()
O método fadeToggle() é semelhante ao método toggle(). Se estiver oculto, ele o exibe. Se estiver visível, ele o oculta e, como pode imaginar, faz isso com animação.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>Animação CSS
Animações CSS
As animações em jQuery são realizadas pelo método animate(). Esse método recebe internamente um argumento JSON. Nesse JSON, definimos quais propriedades CSS do elemento de destino serão alteradas.
O segundo parâmetro é o tempo da animação em milissegundos (é um parâmetro opcional)
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Manipulador de eventos de animação
Manipulador de eventos de animação
O último argumento que podemos atribuir ao método animate é o manipulador de eventos que podemos executar quando a animação terminar.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>animação relativa
Vamos mencionar também uma pequena facilidade sobre animações.
As propriedades usadas nas animações podem receber valores relativos em vez de valores absolutos.
Podemos entender melhor no exemplo abaixo.
Durante a animação, 100px foram adicionados à propriedade top do elemento de destino correspondente.
$("button").animate({
top: "+=100px",
});parar animação
Parando a animação
Para interromper uma animação que está em execução, basta selecionar o destino para o qual a animação foi definida e usar o método stop().
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Prontas
Prontas
Assim como podemos criar animações definindo propriedades CSS personalizadas com jQuery, também podemos usar métodos prontos do jQuery.
Vamos examinar o código a seguir.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");duração relativa da animação
Assim como nos outros métodos de animação, se quisermos definir a duração da animação neste método, devemos passá-la como primeiro argumento.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");manipulador de eventos
A última coisa que direi sobre a animação de deslizamento. Hmm, acho que me esqueci de algo.
Assim como no método animate (para definir um manipulador de eventos que será executado quando a animação terminar), podemos definir a função anônima nos métodos acima como segundo argumento.
setTimeout(function() {
//Call when animation is completed
}, 1000);Parabéns
Parabéns 🎉
Aprendemos jQuery e animações.
Na próxima seção, aprenderemos as operações AJAX.
Perguntas Frequentes
A aula “jQuery e Animações” é grátis?
Sim — o texto completo de “jQuery e Animações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 1 aulas no total.
O que vou aprender em “jQuery e Animações”?
jQuery e Animações Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “jQuery e Animações”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.