Question

我正在处理网站上的某项功能，其中图片应每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);
}

过渡的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需要一个起点来移动＆＃34;过渡，这不是我正在做的，但我仍然设置一个，它仍然没有工作。我的firefox控制台没有错误，所以我不知道可能出现什么问题......

我应该从哪里开始寻找？

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

Answer 1

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

jQuery / CSS转换无法在firefox中运行

1 个答案: