jQuery/CSS transition not working in firefox

Question

I'm working on a feature on a website, where an image should change every 5 seconds, and transition to another one with a fading effect.

My javascript is like this

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

And the CSS for the transition is like this :

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

It perfectly works in chrome, but not in Firefox. I have read that firefox needs a starting point for "moving" transitions, which is not what I am doing, but I still set one anyway, and it still doesn't work. There is no error in my firefox console, so I don't know what could possibly be the problem...

Where should I start looking ?

Edit : here is the jsfiddle : https://jsfiddle.net/kkyyzzug/

Answer 1

Based on this answer - transition background-image is not implemented yet on Firefox. Instead of changing inline-background you can change classname of your image-container. So based on class name you can change background-image