Я пытаюсь создать div с фоном, который меняется каждые 5 секунд, с "эффектом затухания". То, что я делал, очень хорошо работало в Chrome или Opera, но не работает в Firefox, и я не могу понять, почему!
В Chrome или Opera очень хорошая анимация, но в Firefox она просто пропускается, и это не то, что я хочу
Я надеюсь, что кто-то сможет сказать мне, чтонеправильно с тем, что я сделал
Вот что я сделал:
JAVASCRIPT:
$(document).ready(function() {
i=0;
setTimeout('changeBackground(' + i.toString() + ')', 5000);
});
function changeBackground(t){
switch (t) {
case 0:
i++;
$("#divBackground").css({
"background":"url(\"https://www.pets4homes.co.uk/images/articles/4295/large/early-neutering-of-kittens-pros-and-cons-598ddb68021a9.jpg\") no-repeat",
"background-size":"cover"
})
break;
case 1:
i++;
$("#divBackground").css({
"background":"url(\"https://images.ecosia.org/uRXcSxMTTPCdVhkGK51EG4phWdU=/0x390/smart/http%3A%2F%2Fmedias.demooniak.com%2Fphoto%2Fchat-drole%2Ftb%2Fphoto-chat-drole-131.jpg\") no-repeat",
"background-size":"cover"
})
break;
case 2:
i++;
$("#divBackground").css({
"background":"url(\"https://www.wikichat.fr/wp-content/uploads/sites/2/comment-soigner-une-plaie-dun-chat.jpg\") no-repeat",
"background-size":"cover"
})
break;
case 3:
i=0;
$("#divBackground").css({
"background":"url(\"http://cbsnews2.cbsistatic.com/hub/i/r/2015/04/15/4eb2c283-6625-4250-80e8-c580cb7a3ff1/thumbnail/1200x630/35cbdb30d7722e0e95e67c1738815e47/istock000033109430double.jpg\") no-repeat",
"background-size":"cover"
})
break;
}
setTimeout('changeBackground(' + i.toString() + ')', 5000);
}
#about .container#divBackground{
height:200px;
background: url("http://cbsnews2.cbsistatic.com/hub/i/r/2015/04/15/4eb2c283-6625-4250-80e8-c580cb7a3ff1/thumbnail/1200x630/35cbdb30d7722e0e95e67c1738815e47/istock000033109430double.jpg") no-repeat;
background-size: cover;
padding-top: 15px;
border-radius: 20px;
border: 3px solid #303a3b;
-moz-transition : all 0.8s ease-in 0s;
-webkit-transition: all 0.8s ease-in 0s;
-moz-transition: all 0.8s ease-in 0s;
-o-transition: all 0.8s ease-in 0s;
transition: all 0.8s ease-in 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section id="about" class="container-fluid">
<div class="container shadow-lg" id="divBackground">
</div>
</body>