Question

我正试图找到一种方法，让30个背景动画在另一个之后 CSS没有在IE＆amp; Firefox所以我尝试使用jquery，它看起来在这两个浏览器上“闪烁” 我使用css：body预加载图像：{display：none; content：url url url etc}

$(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和＆amp ;;没有“闪烁效果”的情况下使其正常工作Firefox浏览器。

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

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

1 个答案: