isScrolledIntoView獲取對象列表

isScrolledIntoView函數已經被討論過好幾次了。然而，我會在這裏淡入淡出還是一件特別的事情。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(); 
      }

來源

2017-10-16 Patrick Schiller

變種延遲= 500;需要在你的each（）函數 –

Ups之外，你是絕對正確的，但它不能解決我的問題，即img.fading對象的「跳躍淡入」。 –

我設法使用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; 
}

來源

2017-10-18 16:39:54

isScrolledIntoView獲取對象列表

回答

相關問題