Jump to content
Sign in to follow this  
jonathanrn

Animação básica Jquery/Javascript

Recommended Posts

 

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> 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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'?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By teuzero
      Meu site é :https://xraros.000webhostapp.com/
       
      To com seguinte problema eu adicionei esse código:
       
      jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(); } }); no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?
    • By Gourmet
      Eu tenho 3 layout diferentes e gostaria de que quando o usuário clicasse no layout desejado aparecesse o modelo do layout
    • By leandro.silva
      Estou tentando fundir essas funções para receber o total levando em consideração os filtro. Segue.
      FILTRO.
       
       
      $(function(){ $("#tabledit input").keyup(function(){ var index = $(this).parent().index(); var nth = "#tabledit td:nth-child("+(index+1).toString()+")"; var valor = $(this).val().toUpperCase(); $("#tabledit tbody tr").show(); $(nth).each(function(){ if($(this).text().toUpperCase().indexOf(valor) < 0){ $(this).parent().hide(); } }); }); $("#tabledit input").blur(function(){ $(this).val(""); }); TOTAL.
       
       
      $(function(){ var valorCalculado = 0; $( ".valor-calculado" ).each(function() { valorCalculado += parseInt($( this ).text()); }); $( "#qtdtotal" ).text(valorCalculado); });  
    • By fabioamorais
      Ola pessoal, sou novo aqui no fórum e também no mundo da programação. 

      Estou criando um sistema de cadastro de clientes em PHP 7 e mysql
      para meu serviço para fins de organização, tenho ja pronto o sistema de cadastro e edição do cliente, tenho login por usuário e senha.
      preciso colocar nesse sistema uma forma que registre a ação e o usuário que fez a ação quando houver uma alteração no cadastro.
      exemplo;
      O usuario (jose) alterou o status de analise para concluído .
      o usuario (pedro) alterou a localização de mesa para armario.
      e que fosse exibido como um tipo de histórico de eventos no próprio cadastro do cliente.
      e nesse campo se ainda tiver como add cometários.
      Usuario (jose): Precisa entrar em contato com o cliente francisco. 
      Usuario (pedro): cliente foi avisado e está sabendo.
       
      quem souber uma forma de fazer isso, ficaria muito grato.

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.