javascript - 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;
}