3
I’m trying to make a transition from background images via jQuery, with fade-in and fade-out effect and swapping this image, below follows my code.
$(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>
The way the background image looks just doesn’t change, but the fade-in and fade-out effect works.
If I replace ". css(" with ". qcss(" as I found in another problem, the image changes at the moment and does not delay.