javascript - jQuery .fadeOut() 阻止 div 下

Question

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

我正在使用此代码，但在上面的图像淡出之前，下面的图像不会显示。为什么？我希望图像 #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');
        });
    });
});

FIDDLE

Answer 1

问题在于 #current_image div 中的 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 和 #below id，然后确保 #above 具有更高的 z-index(或者实际上，您可能只需要添加/删除#above id)。