从背景淡入另一个

Question

假设我的元素有background-image：background1.png。

如何将元素的背景淡化为background2.png而不会使第一个淡出。

Answer 1

只需将第二个元素（with background2.png）放在第一个元素的顶部即可。并淡出第二个元素。

Answer 2

基本上你可以用JQuery自动化它：

  $('.oldclass').prepend('<div class="newclass"></div>');
  $('.newclass').fadeIn('slow');

工作演示：http://jsfiddle.net/AlienWebguy/GKUnF/

Answer 3

我发现了一个很好的网址，如何做到这一点可以清楚地解释：

http://snook.ca/archives/javascript/jquery-bg-image-animations

但它需要创建一个包含两者的图像，使用CSS Sprites来实现这个......

Answer 4

真的，没有一种简单或优雅的方法可以做到这一点。 CSS动画依赖于像不透明度这样的事物具有中间值（即它们是连续的）。

最好的解决方案可能是必须将div与各自的背景分开，将它们放在彼此的顶部。然后默认隐藏第二个，并在想要更改为背景时调用fadeIn('slow')。