jQuery fadeIn 不适用于 Z-index

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描述:

The .position() method allows us to retrieve the current position of an element relative to the offset parent.

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

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

希望对你有帮助。

– 全速