웨이 포인트 플러그인을 사용하여 하나씩 요소를 표시합니다.

Question

웹 브라우저/뷰포트에 요소가 표시되면 3 개의 요소 (테스트 1, 테스트 2, 테스트 3)를 하나씩 표시하려고합니다. 아래 코드를 인터넷에서 찾았습니다. Fadein은 작동하지만 사용자가 "경유지"에 도달하면 스크롤하여 페이지가로드되는 대신 즉시로드됩니다. 어쩌면 이것은 이해할 수없는 오프셋 코드 때문일 수 있습니까? 이 경우 어떻게됩니까? 그들이 볼 때 그들이으로 display:none와

<script type="text/javascript"> 
$(document).ready(function() { 
$('.test1').waypoint(function(event, direction) { 
    $(this).fadeIn(1500); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 

$('.test2').waypoint(function(event, direction) { 
    $(this).fadeIn(2000); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 

$('.test3').waypoint(function(event, direction) { 
    $(this).fadeIn(2500); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 
}); 
</script> 

Answer 1

요소가 문서에 같은 장소에 거주하지 않는 많은 감사합니다. 이것은 display:none의 요점입니다. Waypoint와 같은 요소의 위치를 ​​읽으려는 스크립트는 일반적으로 페이지 맨 위에있는 것처럼 0으로 넘겨지며 즉각적으로 발사됩니다.

이 문제를 해결하는 가장 좋은 방법은 display:none + fadeIn의 사용을 중지하고 불투명도 애니메이션으로 전환하는 것입니다. 아래 예.

또한 Waypoints 버전 2.0 이상에서는 이벤트 매개 변수가 없어 졌으므로 여기서도 제거했습니다. 나는 또한 오프셋을 변경했습니다. -$(this).height()은 요소가 뷰포트의 맨 위에 완전히있을 때 fadeIn을 트리거합니다.

$('.test1, .test2, .test3').css('opacity', 0); 

$('.test1').waypoint(function(direction) { 
    $(this).animate({ opacity: 1 }, 1500); 
}, { 
    offset: 'bottom-in-view' 
}); 

// etc