jquery - 如何淡入背景图像？

Question

我想要预加载图像并在准备就绪时淡入。我有预加载器工作但无法获得淡入淡出效果。

我尝试过的:

1:CSS3 过渡 - 不适用于背景图片。

2:jQuery fadeIn - 仅适用于 HTML 元素，不适用于 CSS 背景图像。尝试淡入淡出一个元素会导致其中的所有元素也淡出。

jQuery:

$(bg).imagesLoaded({
    done: function($images){
        $('body').css('background-image', "url('" + $images[0].src + "')");

CSS:

body{
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}

我知道可能没有一种巧妙的方法可以实现这一点，但我已经在这里看到了它，例如，所以必须有一种方法:http://movies.io/m/4I/en .

Answer 1

如果你真的需要背景图片解决方案，那么创建元素，在它们上面设置背景图片，像这样:

background-image: url('http://placekitten.com/200/300');<br>

然后使用 jQuery 为各个元素设置动画。

这是一个演示 fiddle :
http://jsfiddle.net/robertp/6rXjs/3/embedded/result/

干杯，
罗布