2

我正在检查这个幻灯片示例，发现了一个奇怪的行为。

我正在使用此代码，但在上面的图像完成淡出之前，下面的图像不会显示。为什么？我预计图像#above会淡出到图像#under中。

（注意#above有z-index:10;）

<div id="current_image">
    <img width="370" id="above" src="...
    <img width="370" id="under" src="...
</div>

jQuery

$(document).ready(function () {
    $(".small_image").click(function () {
        event.preventDefault();
        var image = $(this).prop("rel");
        var above = $('#above');
        var under = $('#under');
        under.prop('src', image);
        above.fadeOut(1000, function () {
            above.prop('src', under.prop('src')).css('display', 'block');
        });
    });
});

小提琴

4

1 回答 1

3

问题是#current_imagediv 中的 2 个图像不是在另一个图像之上，而是一个图像在另一个图像的垂直上方（图像没有堆叠）。

http://jsfiddle.net/cVNTG/2/

因此，您只需要更改一些 CSS：

#current_image {
    width:370px;
    height:245px;
    float:left;
    overflow:hidden;
    position: relative;
}
#current_image img {
    min-height:100%;
    position: absolute;
    top: 0;
    left: 0;
}

现在您的图像完全对齐，并且它们彼此重叠。所以当一个淡出时，另一个在它后面出现。如果你用 Firebug 之类的东西检查过 HTML/CSS，你就会看到这个。

我会考虑重写其中的 JavaScript 部分。你真的不需要改变src和所有这些。只需根据需要分配您的#above和#belowid，然后确保#above具有更高的 z-index（或者实际上，您可能只需要添加/删除#aboveid）。

于 2013-08-12T19:38:28.967 回答