isScrolledIntoView 객체 목록에 대해

Question

isScrolledIntoView 함수는 이미 여러 번 논의되었습니다. 나는 여기에 여전히 퇴색 할 특별한 것을 가지고있었습니다.

문제 : 아래 코드는 개별 항목을 차례대로 표시해야합니다. 그래서 이들은 점차적으로 지연과 함께 나타납니다. 그러나 여기에서는 동시에 호출됩니다. 그렇지 않으면 내가 상상하는대로 작동합니다.

사전에 당신의 도움을 주셔서 감사합니다.

 function isScrolledIntoView(elem) { 
      var docViewTop = jQuery(window).scrollTop(); 
      var docViewBottom = docViewTop + jQuery(window).height(); 

      var elemTop = jQuery(elem).offset().top; 
      var elemBottom = elemTop + jQuery(elem).height(); 

      return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
     } 

     jQuery(window).scroll(function() { 
      if (isScrolledIntoView('#fadein_product1')) { 
       jQuery('#fadein_product1 img.fading').each(function() { 
       inImgViewproduct1 = true; 
       var delay = 500; 
        jQuery(this).delay(delay).fadeIn(2000); 
        delay += 300;       
       }); 
      } 
      else { 
       inImgViewproduct1 = false; 
       jQuery('#fadein_product1 img.fading').fadeOut(); 
      } 

Answer 1

나는 CSS 불투명도와 다른 스크롤 기능을 사용하여 훨씬 잘 작동 할 수있었습니다. 또한 each() 함수에 setTimeout을 추가했습니다.

jQuery를

function isScrolledIntoView(elem) 
{ 
    var docViewTop = jQuery(window).scrollTop(); 
    var docViewBottom = docViewTop + jQuery(window).height(); 
    var elemTop = jQuery(elem).offset().top; 
    var elemBottom = elemTop + jQuery(elem).height(); 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 



jQuery(window).on('scroll', function(e) { 

    if (isScrolledIntoView('#fadein_product1')) { 
     inImgViewproduct1 = true; 
     jQuery('#fadein_product1 .fading').each(function(i) { 
      var el=jQuery(this); 
      setTimeout(function() { 
       el.removeClass('fade'); 
      }, i * 300); 
     }); 
    } else { 
     jQuery('#fadein_product1 .fading').addClass('fade'); 
    } 
}); 

CSS

.fading { 
    opacity: 1; 
    transition: opacity .3s; 
    -ms-transition: opacity .3s; 
    -webkit-transition: opacity .3s; 
    -moz-transition: opacity .3s; 
} 
.fading.fade { 
    opacity: 0; 
}