5

Estou começando em jQuery e tenho uma dúvida: existe algum modo de deixar a mudança abaixo com um espécie de transição?

  <html>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">   </script>
   <meta charset="utf-8" />
    <script>
    $(document).ready(function(){
        $('#image1').on("mousemove", function(){
            $(this).attr("src","http://3.bp.blogspot.com/-fm0ZV85Pz1I/TtgsNO69MLI/AAAAAAAACZw/pRDZIHWCUO4/s1600/idealhomemagazinedotcodotuk24.jpg");
        })
        $('#image1').on("mouseout", function(){
            $(this).attr("src","http://2.bp.blogspot.com/_6lVUS4YoEPU/TQqw1vActVI/AAAAAAAAB0U/suTAg3xbBB8/s1600/arranjosnatal8.jpg");
        })
    })
    </script>
    <body>
      <img src="http://2.bp.blogspot.com/_6lVUS4YoEPU/TQqw1vActVI/AAAAAAAAB0U/suTAg3xbBB8/s1600/arranjosnatal8.jpg" id="image1" />
    </body>
    </div>
 </html>

Queria que a imagem mudasse com uma transição.

1
  • Não acho interessante atribuir por javascript o src a imagem para fazer uma transição, pois dependendo do tamanho poderá demorar a carregar. Pense em colocar as duas imagens na página sendo a do "mousemove" com display none e faça as transições por fadeIn/fadeOut
    – Paulo
    21/03/2014 às 2:33

1 Resposta 1

2

Tem duas opções:

Usando CSS transitions na imagem de fundo.

Neste caso precisamos de um elemento divem vez de uma imagem e atribui-se a esse elemento um backgroung-image.

background-image:url('imagem.jpg');
background-repeat:no-repeat;
transition: background-image 0.5s ease-in-out;

Exemplo

Usando jQuery para fazer fade in e fade out

A melhor opção seria ter as duas imagens já presentes na página, provavelmente sobrepostas e fazer fadeOut da que está por cima. Assim evita problemas ao carregar uma nova imagem quando troca a src.

Mas para responder à sua pergunta com o seu código uma opção de transição simples é fazer fade out / fade in. No exemplo em baixo não atribuí velocidade ao fade, mas também é possível com velocidade de fade diferente.

    $this = $(this);              // colocar o $(this) em memória
    $this.fadeOut(function () {   // começar um fadeOut que corre uma função quando tiver terminado
        $this.attr("src", url);   // mudar a src (com o elemento invisivel)
    });
    $this.fadeIn();               // fazer fadeIn já com a nova imagem

Exemplo

Você está a usar o evento mousemove, no meu exemplo usei o hover para ser mais fácil ver o efeito.

7
  • ele está com um probleminha. Quando coloca-se uma vez, na verdade a primeira vez ele funciona mas depois não mas. 20/03/2014 às 22:51
  • eu editarei minha pergunta 20/03/2014 às 22:52
  • @SamirBraga, mudei o exemplo depois da sua edição da pergunta. É isso que pretende? um hover?
    – Sergio
    20/03/2014 às 23:00
  • Agora sim, muito obrigado. 20/03/2014 às 23:01
  • 1
    @SamirBraga, já agora, adicionei mais uma variante.
    – Sergio
    20/03/2014 às 23:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .