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）。

jQuery .fadeOut（）阻止div下

1 个答案: