jquery 多个背景动画在 Firefox 和 IE 上看起来闪烁答案

【问题标题】：jquery multiple background animation looks blinking on Firefox and IEjquery 多个背景动画在 Firefox 和 IE 上看起来闪烁
【发布时间】：2016-09-29 15:59:57
【问题描述】：

我正在尝试找到一种工作方式，让 30 个背景一个接一个地设置动画。
CSS 在 IE 和 Firefox 上不起作用，所以我尝试使用 jquery，它在这两个浏览器上看起来“闪烁”。
我使用 css 预加载图像：body:after { display:none;内容：url url url等}

$(function() {
    setInterval("anim1()", 100);
});

function anim1() {
    var oCurBack = $('#fullback div.current');
    var oNxtBack = oCurBack.next();
    if (oNxtBack.length == 0)
        return;

    oNxtBack.addClass('current');
    oCurBack.removeClass('current').addClass('previous');
}

css：

#fullback div {
    z-index: 0;
}

#fullback div.current{
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#fullback div.previous{
    z-index: 1;
}

请告诉我如何在没有 IE 和 Firefox 上的“闪烁效果”的情况下使其工作。

【问题讨论】：

标签： jquery animation cross-browser background-image

【解决方案1】：

我的 css 错了，虽然它在 Firefox 上仍然闪烁一点：

#fullback div {
    z-index: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#fullback div.current{
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#fullback div.previous{
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

【讨论】：