2014-12-31 3 views
0

사용자가 아래로 스크롤했을 때 웨이 포인트를 사용하여 애니메이션이 작동하고 효과가 있습니다. 그러나 보시다시피, 부하가 걸리는 동안 처음 몇 가지 눈에 보이는 항목에도 페이드 인이 있습니다.JS를 사용하여 애니메이션에서 보이는 항목 건너 뛰기

어떻게하지 않으실까요? 나는 모든 .card를 way [point.

내 JS

$(function() { 

var waypoints = $('.card').waypoint(function (direction) { 
         $(this).addClass("animated fadeIn"); 


      }, { 
       offset: '90%' 
      }); 

}); 

DEMO : 정확히 당신이 원하는,하지만 당신은 페이지가로드 여부 및 만하면 fadeIn를 추가 할 경우 표시하는 변수를 추가 할 수의 경우 http://jsfiddle.net/ghx49d7x/

답변

2

확실하지 않음 이 :

$(function() { 
    var pageLoaded = false; 
    var waypoints = $('.card').waypoint(function (direction) { 
     $(this).addClass("animated" 
      + (pageLoaded ? " fadeIn" : "")); 
    }, { 
     offset: '90%' 
    }); 
    pageLoaded = true; 
}); 

업데이트 바이올린 : http://jsfiddle.net/ghx49d7x/3/

+0

정말 고마워요! 하지만 이것에 대해서도 살펴볼 수 있습니까? http://stackoverflow.com/questions/27722787/lazy-loading-using-animation-delay –