Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera, blz?
Estou começando a estudar jquery para fazer uma basica animação no site que estou criando para o meu pai.
A animação envolve fade de imagens (fadeIn, fadeOut) e uma movimentação básica. segue um exemplo do que eu quero fazer:
1 - primeiraParte entra com fade e sai com fade;
2 - segundaParte entra primeiro a imagem central, depois imageEsquerda e imagem direita (nessa ordem, ambas em fade);
3 - imagemEsquerda e imagemDireita se movem para baixo da imagem central;
4 - Saide em fade da segundaParte;Então, quais as funções tenho que estudar primeiro já que eu quero entregar isso para o meu pai? Ajuda também me passando assuntos de outros tópicos sobre o que irei ter que utilizar para tal feito.
Obs.: Tenho experiencia apenas em html e css.
Desde já agradeço!
<div id="primeiraParte">
<img src="../Imagens/logo.png">
</div>
<div id="segundaParte">
<div class="imagemEsquerda">
<img src="../Icons/esquerda.png">
</div>
<div class="imagemCentral">
<img src="../Imagens/project.png">
</div>
<div class="imagemDireita">
<img src="../Icons/direita.png">
</div>
</div>Show, estou usando bastante
ja até adicionei essa parte na primeira imagem:
$(function(){
$(".logo").fadeIn(2000, function(){
window.setTimeout(function(){
$('.logo').fadeOut(2000);
}, 3000);
});
});Agora como eu faço para a segunda imagem começar a ser executada so após o fim desta?
Boa esta função promise(), mas eu mudei um pouco o código rsrs. Na segunda página onde tenho 18 imagens utilizei css3 keyframes para fazer o fadeIn, só que no css não tem como eu determinar que é para cada imagem começar a transição 'uma após a outra'. Tem como o Jquery dar uma força nessa parte de 'um de cada vez'?
A documentação sobre os efeitos e animações em jQuery pode ser um bom ponto de partida.