여러 요소에서 'inview'이벤트에 바인딩하는 방법

Question

Velocity.js 및 jquery.inview를 가지고 놀고 있습니다. 내 페이지의 모든 제목을 볼 때 slideDownIn으로 지정합니다. 이 코드는 첫 타이틀을 위해 잘 작동 :

$('.movies-title').bind('inview', function(event, isInView, visiblePartX, visiblePartY) { 
    if (isInView) { 
    // element is now visible in the viewport 
    if (visiblePartY == 'top') { 
     // top part of element is visible 
    } else if (visiblePartY == 'bottom') { 
     // bottom part of element is visible 
    } else { 
     // whole part of element is visible 
     $(this).velocity("transition.slideDownIn", 500);  
    } 
    } else { 
    // element has gone out of viewport 
    $(this).velocity("reverse"); 
    } 
}); 

내가 복사하고 위의 여러 번 붙여 다른 타이틀의 클래스와 .movies-title를 교체하는 경우, 내가 원하는대로 작동.

그러나 이것은 많은 추가 코드처럼 보입니다. $('.movies-title')을 $(.movies-title, .tv-title, .books-title)으로 변경하려고 시도했지만 애니메이션은 목록의 마지막 요소에서만 작동합니다. 또한 모든 타이틀에 .title이라는 새 클래스를 추가하고 .movie-title을 .title으로 변경하려고했지만 그 중 하나도 작동하지 않았습니다.

내가 뭘 잘못하고 있니? 어떻게 코드를 압축 할 수 있습니까?

Answer 1

배수에 대해 bind 대신 대리자를 사용해보십시오.

$('body').delegate('.title','inview', function(event, isInView, visiblePartX, visiblePartY) { 

편집 - - 또한 그들 모두 (I 바로 사용 제목)이 같은

위한 통합 클래스를 만들 죄송 연결 잘못된 바이올린을 처음

볼 바이올린 http://jsfiddle.net/d1g7sLxq/3/

Answer 2

가장 좋은 해결책은 공통점이 있기 때문에 각 요소에 단일 클래스를 사용하는 것입니다. title을 클래스 유형으로 추가하고 해당 클래스에 적용하면됩니다.

<div class="title movie-title"></div> 

내가이 문제에 대해 언급 한 것을 알고 있지만 왜 이것이 작동하지 않는지 알 수 없습니다.