Jquery를 사용하여 스크롤 할 때 요소를 희미하게합니다.

Question

내 웹 사이트에서 이벤트 타임 라인을 만들고 타임 라인을 스크롤하면서 각 요소 (클래스 '.event')를 사용하여 페이드 인하려고합니다. 나는 문제가있다 - 그들은 모두 개별적으로보다는 오히려 동시에 퇴색한다.

왜 그런가? 미리 감사드립니다!

$(document).ready(function() { 

/* Every time the window is scrolled ... */ 
$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.event').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).animate({'opacity':'1'},500); 

     } 

    }); 

}); 

});

Answer 1

JSFiddle을 기반으로하면 이는 스타일링 및/또는 마크 업 문제와 관련이있는 것으로 보입니다.

코드 및 마크 업과 함께 작동하는 JSFiddle의 업데이트 된 버전은 http://jsfiddle.net/2yMn4/2/입니다. 레이아웃이 조금 복잡해지기 때문에 구조를 다시 생각해 볼 필요가 있지만 올바른 방향으로 향하는 것이 좋을 것입니다. 작동을 시작한 주된 변화는 상대 위치가되도록 .event 클래스를 전환하는 것이 었습니다. 그런 다음 두 번째 .posts-timeline 문서와 .posts div를 제거합니다.

.event { 
    position: relaive; 
    opacity: 0; 
    left: 50%; 
    width: 210px; 
    z-index: 100; 
    min-height: 100px; 
}