此代碼運行良好，但是當我在4-5次之後上下滾動時，它會崩潰並且所有元素都消失。爲什麼會發生這種情況，我該如何解決？jQuery滾動淡入崩潰

$(window).on("load",function() { 
    $(window).scroll(function() { 
     var winheight = $(window).innerHeight(); 
      $(".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 element is completely within bounds of the window, fade it in */ 
       if (windowBottom > (objectBottom - (winheight*0.65))) { //object comes into view (scrolling down) 
        if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);} 
       } else { //object goes out of view (scrolling up) 
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);} 
       } 
      }); 
     }); $(window).scroll(); //invoke scroll-handler on page-load 
    });

來源

2017-01-23 Marco Romano

您是否在控制檯中收到任何消息？ –

嗨，沒有零信息，謝謝。 –

你可以發佈你的HTML和CSS？或者製作一個JSFiddle？ – thejoin

好吧，我認爲你的HTML是這樣的：https://jsfiddle.net/szdwwdac/

有時候，如果你正在快速滾動向上和向下，當元素淡出，你如果不能很好地工作。

if (windowBottom >= (objectBottom - (winheight*0.65))) { 
     if ($(this).css("opacity")==0) {$(this).fadeTo(300,1);} 
} else { //object goes out of view (scrolling up) 
     if ($(this).css("opacity")==1) {$(this).fadeTo(300,0);} 
}

這是因爲500ms的動畫。其中一個解決方案可以是500毫秒的滾動頁面的能力/禁用。您可以檢查此解決方案：How to disable scrolling temporarily?

編輯

另一種解決方案可以是：添加一個類「衰落」時，你是你，如果裏面。然後，在if中，eval如果元素hasClass「褪色」。如果沒有，你可以進去製作動畫。

來源

2017-01-24 10:36:00 thejoin

謝謝@thejoin，html是完全一樣的。你的答案或多或少都是工作，所以問題仍然存在，如果你試着用你的jsfiddle來滾動上下滾動，你會看到一些塊消失，並且不工作幾秒鐘。我試着慢慢地做，並以這種方式工作。需要在200以下。 –

是的，我知道。我嘗試了JSFiddle 200ms動畫，並且...它的工作，是的，不，它不是太酷。也許最好的辦法是設置一箇中間狀態「衰落」，當div開始淡入/淡出時。 – thejoin

是的工作，但不好，我認爲要改變它，也有一些干擾不好的東西。所以我必須找到其他解決方案。你知道嗎？ –

jQuery滾動淡入崩潰

回答

編輯

相關問題