背景图片上的css3过渡在Firefox中不起作用

Question

This is a follow up to my question here: jquery UI add class with animation does't work

See the new jsfiddle and try this in Firefox: http://jsfiddle.net/40mga4vy/3/

-webkit-transition: all 2.0s ease;
-moz-transition: all 2.0s ease;
-o-transition: all 2.0s ease;
transition: all 2.0s ease;

This code in combination with some jquery animates a background image change when selecting a new background image from a select-element. It works in all browsers except Firefox (tested in MacOS 35.0.1).

While animating a change in the background color and width/height properties works like a charme in FF: http://jsfiddle.net/tw16/JfK6N/ - animating a background image does not work.

Researching showed that a "left" property has to be set but it turned out to not have any impact. I also tried various notations but with no success, I cannot make it work.

There is a workaround shown in this fiddle: http://jsfiddle.net/40mga4vy/1/

function changeBackground() {
    $('#wallpaper').removeClass();

    $("#wallpaper").addClass("wallpaper_" +      $("#select_category").val()).css('opacity','0').animate({opacity:'1'});
};

This works in FF but its a bit ugly as the class is removed and then opacity raises afterwards (doesn't look as smooth as the css solution).

Any hints/tricks or is this simply not supported?

Answer 1

As far as I know, there is no suport in any browser to swap images smoothly in one single element in css. After you do what you need, make sure you take a look into performance, your workaround is not as much as efficient as it could. In this code

$("#wallpaper").addClass("wallpaper_" + $("#select_category").val()).css('opacity','0').animate({opacity:'1'}); ,

the browser will take every single step until
.animate({opacity:'1'}) .
For instance, the browser first has to find $("#wallpaper") then, it will call for .addClass("wallpaper_" + ...);
and concatenate the result from finding $("#select_category") then getting .val() and so on. everytime this function is called, it will iterate through every single of these objects, so it is not as efficient as probably could and with two more animations in the page, it may became a bit laggy, if possible, use animations through CSS.

Anyway, what I sugest you to do is (if i'm right about what you want), just do what's in here https://jsfiddle.net/bmjg5g9s/