3

Estou tentando fazer uma transição de imagens de fundo via jQuery, com efeito fade-in e fade-out e trocando essa imagem, abaixo segue o meu código.

$(document).ready(function() {
   $("#player").delay(500).animate({"opacity": "0"}, 1000);
   $("#player").delay(1500).animate({"opacity": "1"}, 1000);
   $("#player").delay(1500).css({'background-image': 'url("PLAYERS/ouro1.png")'}); //linha com problema
} );
.image .player {
   height: 600px;
   width: 380px;
   background-image: url("PACKS/P4.jpg");
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image">
      <div class="player" id="player">
      </div>
</div>

Do jeito que está a imagem de fundo simplesmente não troca, mas o efeito fade-in e fade-out funciona.

Se eu trocar o ".css(" por ".qcss(" como achei de solução em outro problema, a imagem troca no momento e não faz o delay.

1 Resposta 1

4

Usar animate do jQuery tem que ter cuidado porque se iniciar uma no mesmo elemento antes da outra terminar, resulta em comportamento inesperado.

Neste caso, seria melhor usar o callback no primeiro animate (iniciar a outra animação apenas quando uma terminar), e trocar a imagem antes da segunda animação:

$(document).ready(function() {
   $("#player")
   .delay(500)
   .animate({"opacity": "0"}, 1000, function(){
      $(this)
      .css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
      .delay(1000)
      .animate({"opacity": "1"}, 1000);
      
   });
} );
.image .player {
   height: 600px;
   width: 380px;
   background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
      <div class="player" id="player">
      </div>
</div>

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 .