jQuery/CSS过渡不能在Firefox中工作

我正在研究一个网站上的功能，其中图像应该每5秒更改一次，并过渡到具有淡化效果的另一个功能。jQuery/CSS过渡不能在Firefox中工作

我的JavaScript是这样

jQuery('.mySlider').css({"background-image" : "url(/images/image1.jpg)"}); 

var counter = 0; 
function setBckImage(){ 
    if(counter<2){ 
     counter++; 
    } else { 
     counter=1; 
    } 


    switch (counter){ 
     case 1: 
      jQuery('.mySlider').css({"background-image" : "url(/images/image1.jpg)"}); 
      break; 
     case 2: 
      jQuery('.mySlider').css({"background-image" : "url(/images/image2.jpg)"}); 
      break; 
    } 
} 

if(jQuery('.mySlider').length) { 
    setInterval(setBckImage, 5000); 
}

而且，转化的CSS是这样的：

.mySlider{ 
left: 0px; 
-webkit-transition: background 1000ms ease-in 1000ms; 
-moz-transition: background 1000ms ease-in 1000ms; 
-o-transition: background 1000ms ease-in 1000ms; 
transition: background 1000ms ease-in 1000ms; 
}

它完美地在Chrome的工作，但不能在Firefox。我已经读过，Firefox需要一个“移动”转换的起点，这不是我正在做的，但我仍然设置了一个，但它仍然不起作用。在我的Firefox控制台没有错误，所以我不知道可能是什么问题...

我应该从哪里开始寻找？

编辑：这里是的jsfiddle：https://jsfiddle.net/kkyyzzug/

来源

2017-02-16 DevBob

提供jsfiddle –

这两段代码被添加到joomla网站的css和js中，它们不会在小提琴中自己工作 – DevBob

不管你用什么作为后端是完全不重要的。它仍然会输出'HTML' +'CSS' +'JavaScript'，以便浏览器呈现它。看起来这就是你遇到的问题。通过选择性地添加***页面的***输出***的相关部分***，包括重现问题所需的***最小***代码量，创建[mcve]。帮助我们帮助你。慢慢来。 –

基于this answer - 转型背景图像没有在Firefox上没有实现。您可以更改图像容器的类名，而不是更改内联背景。所以根据班级名称你可以改变背景图片

来源

2017-02-16 14:49:11

使用这种方法，背景图像将会改变，但是我认为不会有褪色效果？ – DevBob

那么，你可以使用像这个例子中的不透明度http://css3.bradshawenterprises.com/cfimg/ –

jQuery/CSS过渡不能在Firefox中工作

回答

相关问题