Question

为什么第二张图片会消失。我认为它与z-index和opacity有关。

$(document).ready(function() {
    $(window).scroll(function() {
        $('.fade-in').each(function(i) {
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            /* If the object is completely visible in the window, fade it it */
            if (bottom_of_window > bottom_of_object-$(this).outerHeight()/2) {
                $(this).animate({
                    'opacity' : '1'
                }, 500);
            }
        });
    });
});

.fade-in {
    opacity:0 ;
}
.row {
    position: relative;
    width:100%;
    height: 600px;
    background: #000000;
}
.offset {
    height:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="offset">scroll down</div>

<div class="row">
    <img src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" alt="test" class="fade-in"/>
</div>

<img src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" alt="test" class="fade-in"/>

Answer 1

您遇到的问题与z-index或opacity无关。

在您的代码中，您使用.position()方法找出要淡入的元素的坐标。正如documentation描述的那样：

.position（）方法允许我们检索元素 相对于偏移父 的当前位置。

如果您将第一张图片.position().top()打印到控制台，您会看到它始终是0。那是因为它（第一个图像）相对于它的父0元素具有.row的顶部偏移量。导致动画自动触发。

为避免这种情况，您应该使用.offset()方法而不是.position()，因为它会返回元素相对于document的坐标。通过这种方式，您可以使用.rows或其他布局模式的任意组合在滚动时触发效果。

我希望它可以帮到你。

- FF

jQuery fadeIn不适用于Z-index

1 个答案: