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.