此代码运行良好，但是当我在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滚动淡入崩溃

回答

编辑

相关问题