Question

这是我在此处提出的问题的跟进：jquery UI add class with animation does't work

请参阅新的jsfiddle并在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;

当从select元素中选择新的背景图像时，此代码与一些jquery组合动画背景图像更改。它适用于除Firefox之外的所有浏览器（在MacOS 35.0.1中测试）。

虽然动画背景颜色和宽度/高度属性的更改在FF中的效果类似于http://jsfiddle.net/tw16/JfK6N/ - 但动画背景图像不起作用。

研究显示a＆＃34;离开＆＃34;财产必须设置，但结果没有任何影响。我也尝试了各种符号，但没有成功，我无法使其发挥作用。

这个小提琴中有一个解决方法： http://jsfiddle.net/40mga4vy/1/

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

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

这适用于FF，但它有点难看，因为删除了类，然后不透明度提升（看起来不像css解决方案那么流畅）。

任何提示/技巧或根本不支持？

Answer 1

据我所知，任何浏览器都没有支持在css中的单个元素中平滑地交换图像。在您完成所需的工作后，请确保您了解性能，您的解决方法并不尽可能高效。在此代码中

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

浏览器将采取每一步，直到
的 .animate({opacity:'1'}) 即可。
例如，浏览器首先必须找到 $("#wallpaper") ，然后它会调用 .addClass("wallpaper_" + ...);
并结合查找 $("#select_category") 然后获取 .val() 等结果。每次调用这个函数时，它都会迭代这些对象中的每一个，因此它不像可能的那样高效，并且在页面中有两个以上的动画，如果可能的话，它可能会变得有点滞后，通过CSS使用动画。 / p>

无论如何，我要你做的就是（如果我对你想要的是正确的话），就这样做https://jsfiddle.net/bmjg5g9s/

背景图像上的css3转换在Firefox中不起作用

1 个答案: