Introdução ao jQuery
3.7 Animações e efeitos especiais
$(document).ready(function(){
$("li:not(ul li)").css("color","red");
});
</script>
Os elementos selecionados nesse caso serão apenas aqueles dentro da tag <ol>:
<li>Item P</li>
<li>Item L</li>
<li>Item Q</li>
<li>Item W</li>
3.7 Animações e efeitos especiais O jQuery possui diversas funções que permitem realizar animações básicas com elementos HTML. Estas animações operam sobre propriedades do CSS variando seus valores de modo a criar um efeito de transição entre dois estados como, por exemplo, entre um estado visível e outro oculto.
Funções fadeIn() e fadeOut()
Tais funções permitem efetuar a animação entre dois estados: 1. totalmente visível e 2. totalmente invisível. Ambas as funções operam sobre a propriedade opacitydo CSS. A diferença é que a função fadeIn() ajusta o nível de opacidade de 0 para 1 , de modo gradual, o que simula o efeito de aparecimento. Já a função fadeOut() faz exatamente o oposto:ela ajusta a opacidade de 1 para 0 , de modo gradual, simulando o efeito de desaparecimento.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#desaparecer").click(function(){
$("#foto").fadeOut();
});
$("#aparecer").click(function(){
$("#foto").fadeIn();
});
});
</script>
</head>
<body>
<button id="desaparecer">Desaparecer</button> <button id="aparecer">Aparecer</button><br> <img id="foto" src="../imagens/carro.png"/>
</body>
</html>
Função fadeTo()
Permite especificar a opacidade ou transparência de um elemento entre uma escala de 0 a 1 , onde 0 é totalmente transparente e 1 totalmente visível. No código abaixo, a função fadeTo recebe dois parâmetros: (1) a velocidade( slow / fast ) que ocorrerá a animação e (2) o nível da opacidade(entre 0 e 1 ).
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
// reduz em 50% a opacidade:
$("#foto").click(function(){
$(this).fadeTo("slow",0.5);
});
});
</script>
</head>
<body>
<img id="foto" src="../imagens/carro.png"/>
</body>
</html>
Funções slideUp() e slideDown()
A função slideUp() esconde um elemento diminuindo o seu tamanho até desaparecer. A função slideDown() faz o contrário, torna o elemento visível aumentando seu tamanho progressivamente até atingir o tamanho original. No exemplo abaixo,a imagem #foto é submetida à função slideUp() ou slideDown() sempre que um dos botões é pressionado:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<style>
#foto{
border: 1px solid black;
}
</style>
<script>
$(document).ready(function(){
// reduz em 50% a opacidade:
$("#slideup").click(function(){
$("#foto").slideUp("slow");
});
$("#slidedown").click(function(){
$("#foto").slideDown("slow");
});
});
</script>
</head>
<body>
<button id="slideup">SlideUp</button>
<button id="slidedown">SlideDown</button><br> <img id="foto" src="../imagens/carro.png"/>
</body>
</html>
Função animate
Permite criar animações sobre propriedades numéricas do CSS. No exemplo a seguir, define-se uma div "barra" que quando clicado no botão "começar" tem sua propriedade width aumentada de 30px para 100% da tela. Essa animação tem duração de 5000 milissegundos (ou 5 segundos):
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<style>
#barra{
margin-top:20px; background-color:lightgreen;
border:1px solid black; width:30px;
height:25px;
}
</style>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("#barra").animate({width:"100%"},5000);
});
});
</script>
</head>
<body>
<button id="start">Começar</button>
<div id="barra"></div>
</body>
</html>
Para animar duas ou mais propriedades CSS simultaneamente, basta passar como parâmetro para a função animate() um conjunto de propriedade-valor entre chaves. Veja o exemplo a seguir, onde a animação opera sobre o width e height do elemento "barra":
<script>
$(document).ready(function(){
$("#start").click(function(){
$("#barra").animate(
{width:"100%",height:"200px"},5000);
});
});
</script>
Função Delay
A função delay permite definir um atraso entre uma animação e outra. No exemplo a seguir,a imagem "foto" é primeiramente escondida com a função slideUp() . A seguir,a função delay(2000) faz uma pausa de 2 segundos antes de executar a função fadeIn() .
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("#foto").slideUp(1000);
$("#foto").delay(2000);
$("#foto").fadeIn();
});
});