jQuery fadeIn不適用於Z-index

第二張圖像如何淡入。我認爲它與z-index和opacity有關。 jQuery fadeIn不適用於Z-index

$(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"/>

來源

2014-09-25 user3808357

你實際上是試圖重新創建**的圖像延遲加載** ...只是沒有延遲加載？ – 2014-09-25 00:52:49

你有問題無關，與z-index也不opacity。

在您的代碼中，您使用.position()方法找出要淡入的元素的座標。作爲documentation描述：

的.POSITION（）方法允許我們以檢索相對於偏移父元素的當前位置。

如果打印第一圖像的.position().top()到控制檯，你會看到，這將是永遠0。這是因爲它（第一張圖片）的頂部偏移量爲0，相對於它的父代.row元素。使動畫自動觸發。

爲避免這種情況，應該使用.offset()方法而不是.position()，因爲它會返回元素相對於document的座標。這樣，您可以使用.rows或其他佈局模式的任意組合滾動觸發效果。

我希望它能幫助你。

- FF

來源

2014-09-25 06:14:07 fabiofl

jQuery fadeIn不適用於Z-index

回答

相關問題