Javascript jQuery/CSS转换在firefox中不起作用

我正在开发一个网站上的功能，在这个功能中，图像应该每5秒更改一次，然后转换到另一个具有淡入淡出效果的图像

我的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);
}

它在chrome中工作得很好，但在Firefox中却不行。我已经读到firefox需要一个“移动”转换的起点，这不是我正在做的，但我仍然设置了一个起点，它仍然不起作用。我的firefox控制台没有错误，所以我不知道可能是什么问题

我应该从哪里开始寻找

---

编辑：以下是JSFIDLE:

基于-转换背景图像尚未在Firefox上实现。您可以更改图像容器的类名，而不是更改内联背景。因此，基于类名，您可以更改背景图像

这两段代码添加到joomla网站的css和js中，它们不会自行工作，无论您使用什么作为后端都完全不重要。它仍然会输出

HTML

+

CSS

+

JavaScript

，以便浏览器呈现它。看起来这就是你遇到的问题。通过有选择地添加页面输出的相关部分，包括重现问题所需的最少代码量，来创建一个问题。帮助我们，帮助你。慢慢来。我设法在JSFIDLE中重现了这个问题，并将其添加到原始帖子中。使用这种方法，背景图像会发生变化，但不会出现我认为的褪色效果？好吧，您可以像本例中那样使用不透明度

.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;
}