用动画改变背景图像

Question

我有一个代码：

slider.stop().animate({
    opacity: 0
}, 1000, function() {
    $(this)
        .css({
            'background-image': 'url(' + slider_bgs_array[array_item + 1] + ')'
        })
        .animate({
            opacity: 1
        }, 1000);
});

这是做什么的 - 改变包装器背景图像。但效果已经消退，而当背景发生变化时，我看到了白色空间。

我想做的只是一个效果，就像在这个plugin中一样，但是背景图像，而不是包装内的图像。有什么想法吗？

P.S。：想法是淡化旧图像，同时淡化新图像以达到效果。

Answer 1

据我所知，如果不使用一个元素看到白色屏幕，就不可能将背景图像直接淡入另一个图像。

为了做到这一点，你需要至少两个代表两个背景图像的元素。然后，您可以淡出第一个，而另一个在第一个之后已经可见（因此两个元素都在彼此的顶部）。 这将导致您所讨论的场景在背景图像发生变化时您将看不到任何白色背景。

您可能希望查找（免费使用）全屏背景滑块。 有很多这些滑块非常容易使用（例如你自己提到的链接：http://srobbin.com/jquery-plugins/backstretch/）。这些滑块的摩擦使用与上述相同的原理。

编辑：我已经检查了后拉伸插件是如何实现这一点的，我可以确认他们使用的是与上面相同的原理。转换发生时，新背景图像将作为当前背景图像下方的新元素添加。当前的背景图像将逐渐淡出，并在完全淡出后被删除。