如何:从一个背景图像滑动到另一个背景图像100%的高度和宽度

Question

嘿，伙计们(可能还有女孩！)

我正在寻找一种方法来滑动到左边的背景图像，并有另一个背景图像取代第一张幻灯片从右边。需要对此进行设置，以便可以替换图像(因此，当您单击页面时，唯一的图像将进入，而前一个图像将被替换)。

我已经很好地尝试了一些东西，比如jQuery animate函数：animate("backgroundPosition: "-" + $(window).width() + " 0px");

它与以下插件配合使用得很好：http://keith-wood.name/backgroundPos.html

目前，我在body后面有一个div标签，它有100%的高度和宽度，绝对位置和z-index:-1。它的静态效果很好，但我不能想出一种平滑的方法来移除这个(到侧面)，同时从左边加载另一个图像，并滑动到替换旧的图像。

我已经尝试了大多数方法，但如果有人有任何关于如何正确解决这个问题的想法，那就太好了。

Answer 1

与其使用背景位置，为什么不在相邻的绝对定位的div中使用静态定位的背景呢？将第二个div与您要过渡到的背景保持在屏幕外，然后滑动div将原来的屏幕移出屏幕，并将新的移到屏幕上。

您可以通过随后销毁屏幕外的div，并使用序列中的下一个背景在屏幕外的另一侧重新创建它，从而使效果持续下去。