jQuery и переход CSS на toggleClass изменение фонового изображения

Question

У меня есть div с фоновым изображением.
Класс, который я добавляю с помощью этого кода, устанавливает другое изображение в качестве фона.

$(".imageclass").hover(function() { 
    $(this).toggleClass("imageclass2"); 
}); 

Я стараюсь иметь плавный переход при переключении класс, но это:

-webkit-transition: 0.4s ease; 
-moz-transition: 0.4s ease; 
-o-transition: 0.4s ease; 
transition: 0.4s ease; 

работает только на Chrome, как вы можете видеть здесь

https://jsfiddle.net/ng8d2cqt/1/

Answer 1

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

Я бы рекомендовал определить два контейнера для каждого изображения и наложить их друг на друга. «Активное» изображение будет иметь непрозрачность, равную 0, и переход на 1 при наведении.