자바 스크립트 불투명도 호버링 및 무한 스크롤

Question

내 이미지에이 코드 조각이 있으므로 마우스를 가리 키지 않으면 불투명도가 낮아질 수 있습니다. 나는 또한이 무한 스크롤 코드

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script> 

을 사용하고 그리고 함께 나는 경우에만 초기 페이지가로드 정의 된 첫 번째 사진을 불투명하게 얻을, 제외

$(document).ready(function() { 
    $("img").css("opacity", 0.8); 
    $("img").hover(function() { 
     $(this).animate({ 
      opacity: 1.0 
     }, 500); 
    }, function() { 
     $(this).animate({ 
      opacity: 0.8 
     }, 500); 
    }); 
}); 

. 아래로 스크롤하고 새로운 이미지에 무한 스크롤 스크립트가로드되면 불투명도는 영향을주지 않습니다.

어떻게 이것을 무한 스크롤 스크립트와 함께 사용할 수 있습니까?

Answer 1

사용 jQuery를 이벤트 위임 :

$(document).ready(function() { 
    $("body").on('mouseenter', 'img', function() { 
     $(this).animate({ 
      opacity: 1.0 
     }, 500); 
    }).on('mouseleave', 'img', function() { 
     $(this).animate({ 
      opacity: 0.8 
     }, 500); 
    }); 
}); 

이미지의 불투명도는 자바 스크립트를 통해 설정되어서는 안하지만, 진정한 CSS 규칙으로 대신.

Answer 2

당신은 동적으로 생성 된 요소에 이벤트를 바인딩해야합니다

$("body").on('hover', 'img', function() { 
    $(this).animate({ 
     opacity: 1.0 
    }, 500); 
}, function() { 
    $(this).animate({ 
     opacity: 0.8 
    }, 500); 
}); 

이 <img /> 모든 태그가 들어있는 요소 body를 교체합니다. 대신 hover의