时间戳

首页 > 解决方案 > 尝试在 Firefox 中使用 jQuery 的转换时出现错误

javascript - 尝试在 Firefox 中使用 jQuery 的转换时出现错误

问题描述

我正在尝试创建一个背景每 5 秒更改一次的 div，并带有“淡入淡出效果” 我在 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>

标签： javascriptjqueryhtmlcssfirefox

解决方案

推荐阅读