클래스가 보이기 시작할 때 애니메이트

Question

블록이 뷰로 스크롤 될 때마다 div 블록을 하나씩 페이드 인하려고합니다. 그러면 거의 보이지 않을 때 페이드 아웃됩니다.

지금까지 JQuery Waypoint를 사용하여이 작업을 수행했습니다. 그러나 모든 블록은 한 번에 fadeIn 및 out으로 처리됩니다. 이는 클래스를 대상으로하기 때문입니다. 당신이 this.element를 사용하여 개별 웨이 포인트 요소에 액세스 할 수 있어야 웨이 포인트 핸들러 내부

// scrolling down 
$portfolioRow.waypoint(function(direction) { 
    if (direction === 'down') { 
     $($portfolioRow).find(".portfolio-block-text").removeClass('no-opacity'); 
    } 
}, { offset: '50%' }); 

// scrolling up 
$portfolioRow.waypoint(function(direction) { 
    if (direction === 'up') { 
     $($portfolioRow).find(".portfolio-block-text").addClass('no-opacity'); 
    } 
}, { offset: '90%' }); 

Answer 1

:

내 코드를 참조하십시오.

변경해보십시오 :

$($portfolioRow).find(etc. 

에 : https://jsfiddle.net/me7ye126/

내 바이올린이 난에 웨이 포인트의 jQuery 구문을 가져올 수 없습니다 (바닐라 JS 웨이 포인트의 구문을 사용합니다 여기

$(this.element).find(etc. 

는 바이올린입니다 어떤 이유로 JSFiddle에서 작업), $(this.element)은 어느 쪽이든 작동해야합니다.