jquery multiple background animation looks blinking on Firefox and IE

Question

I am trying to find a working way to have 30 backgrounds animated on after the other.
CSS wasn't working on IE & Firefox so I tried with jquery and it looks "blinking" on these two browsers.
I preload the images using css: body:after { 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;
}  

Please show me how can I make it work without the "blinking effect" on IE & Firefox.

Answer 1

I was wrong with the css though it blinks a little on Firefox still:

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