jQuery/CSS переход не работает в firefox

Question

Я работаю над функцией на веб-сайте, где изображение должно меняться каждые 5 секунд и переход на другой с эффектом затухания.

Мой браузер как этот

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

И CSS для перехода, как это:

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

Он отлично работает в хром, но не в Firefox. Я прочитал, что firefox нуждается в отправной точке для «перемещающихся» переходов, что не то, что я делаю, но я все равно все равно устанавливаю, и это все еще не работает. В моей консоли firefox нет ошибок, поэтому я не знаю, что может быть проблемой ...

С какого места я должен искать?

Edit: здесь jsfiddle: https://jsfiddle.net/kkyyzzug/

Answer 1

основе this answer - переход фоновое изображение еще не реализована на Firefox. Вместо изменения inline-background вы можете изменить имя класса вашего контейнера-изображения. Поэтому, основываясь на имени класса, вы можете изменить фоновое изображение