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

Question

大家好（也可能是女孩！）

我正在寻找一种将背景图像向左滑动并让另一个背景图像替换从右侧滑入的第一个背景图像的方法。这需要进行设置，以便可以替换图像（因此，当您单击页面时，会出现唯一图像并替换之前的图像）。

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

与这个插件配合得很好：http://keith-wood.name/backgroundPos.html

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

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

Answer 1

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

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