jQuery fadeIn이 Z- 인덱스와 함께 작동하지 않습니다.

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 요소와 비교됩니다. 애니메이션이 자동으로 트리거되도록합니다.

을 기준으로 요소의 좌표를 반환하므로이 문제를 방지하려면 .position() 대신 .offset() 메서드를 사용해야합니다. 이 방법을 사용하면 .rows 또는 다른 레이아웃 패턴을 조합하여 스크롤 할 때 효과를 낼 수 있습니다.

도움이되기를 바랍니다.

- FF