jQuery가 스크롤 할 때 표시됩니다.

Question

jQuery visible 플러그인을 사용하여 뷰포트에 요소가 표시되는지 여부를 감지하려고합니다. 나는이 같은 코드를 사용합니다

animateFrontPage: function(){ 
    var apps = 0; 
    if($('#apps-shelf').visible(true)) { 
     apps = 1; 
     if(apps == 1) { 
      $('#apps-shelf li').velocity("transition.bounceUpIn", { stagger: 150 }); 
      apps = 0 
     } 
    } 
} 

을 나는 스크롤 기능을 실행합니다

$(window).scroll(function() { 
    Functions.animateFrontPage(); 
}); 

문제는 - 애니메이션은 모든 스크롤 자체를 반복합니다. 그것을 막기 위해 무엇을 할 수 있습니까?

Answer 1

애니메이션을 한 번만 표시하려면 요소에 클래스를 추가하여 완료되었음을 알린 다음 요소에이 클래스가없는 경우 애니메이션을 수행 할 때마다 수행하십시오. 이 라인을 따라 아마도 뭔가 : 첫 번째 요소 $('#apps-shelf')의 A) 애니메이션 :

animateFrontPage: function(){ 
    var $el = $('#apps-shelf'); 
    if($el.visible(true) && !$el.hasClass('finished')) { 
     $el.addClass('finished'); 
     $el.find('li').velocity("transition.bounceUpIn", { stagger: 150 }); 
    } 
} 

업데이트

이것은 당신이 다른 애니메이션이 이러한 조건에서 실행하려면 필요한 다른 문이다 이미 발생했으며 b) 요소 $('#apps-shelf')이 더 이상 화면에 표시되지 않습니다 (예 : 과거 스크롤 한 것입니다).

animateFrontPage: function(){ 
    var $el = $('#apps-shelf'); 
    if($el.visible(true) && !$el.hasClass('finished')) { 
     $el.addClass('finished'); 
     $el.find('li').velocity("transition.bounceUpIn", { stagger: 150 }); 
    } else if (!$el.visible(true) && $el.hasClass('finished')){ 
     //other animation here 
    } 
}