在响应式 css 平台（Twitter Bootstrap）中进行延迟图像交换

Question

我一直试图弄清楚如何在下面的代码中对 image2 进行简单的淡入操作。通常我会使用带有 position: absolute 和 z-index 的 css 将 image1 放在 image2 的顶部，然后淡出 image1 以显示 image2。问题是我正在尝试使用 Twitter Bootstrap 响应式 css，这似乎排除了这个和类似的简单方法，所以我转向了 jQuery。但我似乎无法正确编码。我在下面使用的内容仅在加载 image2 之前显示了 image1 的一瞬间。这也只是我想要它做的一部分。一旦我更改了延迟的图像 src，我想淡入新图像。我尝试将 image2 放在包含 div 背景图像中，但无法让响应式 css 正确处理它。所以我不确定还有什么可以尝试的。有人可以指出我正确的方向吗？我似乎只能找到 CSS 效果的方法。

在 html 文件中：

<img class="contactus" src="/responsive/images/image1.jpg" />

在 javascript 文件中：

$(".contactus").delay(3500).attr("src", "/responsive/images/image2.jpg");

谢谢

Answer 1

您的解决方案的问题在于它只是切换图像而没有任何效果。尝试将图像叠加在一起，隐藏第二张图像，然后将其淡入第一张图像的顶部。一旦它淡入，然后隐藏第一张图像（可选）。尚未测试以下内容，但它应该让您朝着正确的方向前进。

HTML：

<div><img class="image1" src="/responsive/images/image1.jpg" />
<img class="image2" src="/responsive/images/image2.jpg" /></div>

JS：

$(".image2").hide().delay(3500).fadeIn("slow", function() {
    $(".image1").hide();
});

CSS：

div { position: relative; }
img { position: absolute; top: 0; left: 0;  }