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/

These two pieces of code are added in the css and js of a joomla website, they won't work by their own in a fiddle — DevBob, Feb 16 '17 at 13:46
Whatever you use as back-end is utterly unimportant. It will still output `HTML` + `CSS` + `JavaScript` in order for browsers to render it. And it looks like that's what you're having trouble with. Create a [mcve] by selectively adding ***relevant parts*** of the ***output of your page***, including the ***minimal*** amount of code required to reproduce the problem. Help us help you. Take your time. — tao, Feb 16 '17 at 13:53
I managed to reproduce the problem in a jsfiddle and added it in the original post. — DevBob, Feb 16 '17 at 14:36

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

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

edited May 23 '17 at 11:46

Community

1
1

answered Feb 16 '17 at 14:49

Alex Slipknot

2,439
1
18
26

Using this method, the background image will change, but there won't be the fading effect I think ? – DevBob Feb 17 '17 at 09:07
Well, you can use opacity like in this example http://css3.bradshawenterprises.com/cfimg/ – Alex Slipknot Feb 17 '17 at 09:51

jQuery/CSS transition not working in firefox

1 Answers1