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()方法来找出要淡入的元素的坐标。 如文档所述：

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

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

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

希望对您有帮助。

– FF