修復延遲jQuery的褪色

Question

vol7ron告訴我如何實現其中元素消失在向下滾動的效果，並在向上滾動淡出這裏：Why does "($(this).css('opacity')==.3)" not work?

的jsfiddle：http://jsfiddle.net/b7qnrsrz/16/

$(window).on("load", function() { 
    function fade() { 
     $('.fade').each(function() { 
      /* Check the location of each desired element */ 
      var objectBottom = $(this).offset().top + $(this).outerHeight(); 
      var windowBottom = $(window).scrollTop() + $(window).innerHeight(); 

      /* If the object is completely visible in the window, fade it in */ 
      if (objectBottom < windowBottom) { //object comes into view (scrolling down) 
       if ($(this).css('opacity') != 1) { 
        $(this).stop(true,false).fadeTo(500, 1); 
       } 
      } else { //object goes out of view (scrolling up) 
       if ($(this).css('opacity') == 1) { 
        $(this).stop(true,false).fadeTo(500, .3); 
       } 
      } 
     }); 
    } 
    fade(); //Fade in completely visible elements during page-load 
    $(window).scroll(function() { 
     fade(); 
    }); //Fade in elements during scroll 
    }); 

這作品幾乎完美。就這樣，這些盒子等着褪色，直到我停止滾動。所以如果我順利地滾過其中的三個，而不是在我滾過每一個時逐一淡出，他們都會等待淡入，直到我停止滾動。我該如何糾正這種情況，即使在滾動時觸發淡入淡出，而不是等到停止後纔會觸發？

Answer 1

這是因爲腳本中存在錯誤。

每當您滾動時，都會執行淡入淡出功能。由於動畫的前綴爲stop()，因此如果您慢速滾動，動畫將永遠無法運行。

您可以刪除.stop()或找到一種方法來淡入只適用於尚未衰落元素。

---

似乎是另一個bug。有時項目不會被檢測到在視口中，並且它們不會淡入。我不確定爲什麼發生這種情況。這可能與真正快速滾動有關。