Jump to content
André Ciappina

Como fazer um efeito crossfade em mudança de src da mesma tag <img/> [JQUERY]

Recommended Posts

E aí pessoal! Eu tô desenvolvendo um modelo de portfólio fotográfico, por razões de aprendizado mesmo, mas travei em um momento e passei o dia pesquisando como fazer isso.

Basicamente, é uma espiral áurea de imagens que trocam de lugar, dando a impressão de infinidade.

  • Se você clicar na maior, ela fica em tela cheia;
  • Clicando nas outras, todas as imagens se movem ao quadrado seguinte.

 

Até agora há pouco, eu estava fazendo isso mudando a posição de cada div onde a imagem fica, por meio de addClass() e removeClass(). Só que assim tava muito difícil imaginar como eu alcançaria o efeito de infinidade das imagens, já que apenas seis imagens aparecem de cada vez, então são seis DIVs se movimentando a cada clique - isso se complicaria quando eu tentasse colocar muitas imagens a serem disponibilizadas na página.

 

Mas hoje eu tentei outro método: agora são 6 divs com uma imagem dentro cada um, mas não é a posição deles que mudará, e sim o atributo src="" da tag <img/>. Pra isso, usei attr().

Então cada src altera de valor em fila, cada vez que eu clico no gatilho.

 

Só que mudar o src vai além de CSS, então eu não posso usar transition como antes. Agora o máximo que eu posso fazer é um crossfade entre as imagens. Só que o fadeOut() e fadeIn() também não funcionam! Tecnicamente, funcionam, mas não visualmente. Pra consertar isso eu já tentei delay(), stop(), finish(), promise(), toggleClass() entre outros jeitos.

 

Bom, já falei demais, vocês podem ver a página funcionando no CodePen:

https://codepen.io/dehciappina/pen/yjWOdM

 

Nesse código eu usei toggleClass, pois foi o único jeito que consegui ver um fade de verdade. Mas, obviamente, não funciona, já que o toggle se aplica à mesma tag <img/> e ou faz ela desaparecer completamente com um clique, ou eu uso dois toggle e eles se anulam quando a função é chamada.

 

Bom, é isso, espero ter me explicado o suficiente. Obrigado!!!

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

  • Similar Content

    • By andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By SrTunes
      Boa tarde amigos, sei que há vario tópicos parecidos com esse, com praticamente a mesma dúvida, mas com diferentes resoluções. Mas o motivo de eu ter aberto um tópico novo foi por causa tenho duvida no meu código que não encontrei resposta nos outros tópicos.
       
      De antemão informo que meu conhecimento em javascript é muito limitado, por isso peço encarecidamente a paciência e compreensão dos colegas e dede já agradeço a todos. Muito obrigado.
       
      Bem, o problema:
       
      Tenho um form php com dois campos apenas: "PN do item" e "Descrição".
      Para o primeiro campo de input (PN do Item), com a ajuda da internet, implementei um script que a medida que digito ele faz uma busca no BD e autocompleta. Até ai beleza.
      O que estou querendo agora é, aproveitando a minha estrutura, fazer com que ao escolher o item do primeiro campo de input, o segundo campo de input me retornasse do BD a descrição deste item automaticamente sem refresh da página.
      Isso é possível?
       
      Abaixo deixo meus scripts:
      <?php require_once 'config/conexao.class.php'; require_once 'config/crud.class.php'; $con = new conexao(); // instancia classe de conxao $con->connect(); // abre conexao com o banco $consulta = mysql_query("SELECT pn_item FROM descricao_de_itens"); //Busca da tabela descricao_de_itens o campo pn_item para preencher as opções no form $dados =""; if(mysql_num_rows($consulta) > 0){ while($row = mysql_fetch_assoc($consulta)){ $dados = $dados."\"".$row["pn_item"]."\","; } } $dados = substr($dados,0,-1); // retira a última virgula ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="http://localhost/controle_estoque/css/jquery-ui.css"> <script src="http://localhost/controle_estoque/js/jquery-3.4.1.js"></script> <script src="http://localhost/controle_estoque/js/ui/jquery-ui.js"></script> <script> $( function(){ var availableTags = [<?php echo $dados?>]; $( "#tags" ).autocomplete({ source: availableTags }); } ); </script> <title></title> </head> <body> <form action="" method="post"><!-- formulario carrega a si mesmo com o action vazio --> <div class="ui-widget"> <label for="tags">PN do Item:</label> <input id="tags" type="text" name="nome"/> <br /> <br /> </div> <label>Descri&ccedil;&atilde;o:</label> <input type="text" name="descricao"/> <br /> <br /> <input type="submit" name="cadastrar" value="Cadastrar" /> </form> </body> </html> <?php $con->disconnect(); // fecha conexao com o banco ?>  
    • By odenilson marques
      Bom dia!
       
      Pessoal tenho um formulário com 3 campos input, nos três estou usando o plugin validate da jquery para realizar a validação,
      até aí tudo certo, porém em um desses input, estou usando o autocomplete também da jquery para carregar os dados de uma determinada tabela do BD. 
      No entanto, está ocorrendo um problema, pois quando utilizo, por exemplo a versão jquery.3.1.1.js a validação funciona, porém o autocomplete não, e quando utilizo a versão jquery.js o autocomplete funciona e a validação não. Alguém poderia me uma luz de como chegar a uma solução para esse problema? 
       
      Grato pela atenção!
       
       
       
    • By Richard.Ribeiro
      Boa tarde Pessoal e minha primeira vez aqui. e gostaria de uma ajuda.
      como posso salvar no banco o input adicionado pela função ONCLICK??
      Encontrei essa ajuda  aqui no fórum "(formulario[0][quantidade]) para que os inputs adicionados não fiquem com mesmo nome, porém ainda não conseguir salvar no banco, estou salvando apenas o principal.
      Resumindo, preciso salvar os pedidos de todos inputs e select adicionado pelo onlick.
       
       
        <div id="box" >
        <form id="teste"  method="post">
          <?php
            if(isset($_POST['acao'])){
              $tipo_material = $_POST['material'];
              $quantidade = $_POST['quantidade'];

              // salvar no banco de dados!
                  $gravar = new Painel();
                  $gravar->cadastrarItem($tipo_material,$quantidade);
                  }
        ?>
        <div class="pedido">

          <label>Selecione Material:</label>
          <select name="formulario[0] [material]" id="material">  
      --AQUI MOSTRA OS DADOS RETORNADOS POR UM CONSULTA AO BANCO COM FOREACH--
             </select>
          <input type="text" id="quantidade" name="formulario[0][quantidade]" placeholder="Digite a Quantidade" >
          <input type="submit" name="acao" value="Cadastrar!">
          </form>
      </div><!--pedido-->
        </div><!--box-->
       
       
    • By vmdev
      Bom dia!
      Eu tô com um probleminha aqui, espero que alguém consiga me ajudar.
      Eu tenho dois elementos: h1 e h2, eu fiz um script para efeito de digitação pra ambos, só que eu quero que o efeito de digitação do h2 seja iniciado somente quando o h1 for terminado, ou, depois de um tempo que eu selecionar. Tentei fazer dessa forma, mas não deu certo:
      <script>                                 function typeWrite (elemento) {                                 const textoArray = elemento.innerHTML.split('');                                 elemento.innerHTML = '';                                 textoArray.forEach((letra, i) => {                                  setTimeout(function() {                                      elemento.innerHTML += letra                                  }, 75 * i)                                                                  });                                                      }                          const titulo = document.querySelector('h1')                          typeWrite(titulo);                          </script>                          <script>                             var segundos = 4;                             setTimeout ( function typeWrite (elemento) {                             const textoArray = elemento.innerHTML.split('');                             elemento.innerHTML = '';                             textoArray.forEach((letra, i) => {                              setTimeout(function() {                                  elemento.innerHTML += letra                              }, 75 * i)                                                          });                                              }, segundos * 1000);                      const titulo2 = document.querySelector('h2')                      typeWrite(titulo2);                      </script>  
       
       Alguém pode ma falar qual é o erro? Obrigado!
×

Important Information

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