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不透明度和不同的滚动功能使它工作得更好。另外我在每个（）函数中添加了一个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; 
}