Javascript 修复了一个版本的jquery代码不能正常工作的问题，为什么我的第二个版本在Firefox中速度如此之慢？

首先，这里有一个指向测试页面的链接：

编辑：我还设置了一个JSFIDLE来使用它：

因此，我在main feature div上设置了固定背景的页面。以下是页面设置的基本框架：

<div class="main"></div>
<div class="game2 dark"></div>
<div class="game3 dark"></div>
<div class="gave4 dark"></div>

现在，所有的工作本身就很好。然后我添加了一点javascript，告诉下一个div在达到某个点时淡入，当我添加javascript时，就会出现一些问题

这只发生在Chrome（也被选中为Chrome Canary）中，而不是Firefox中。当你向下滚动时，淡入会完美地发生。现在，由于某种原因向上滚动时，背景暂时不再固定，一直向上滚动，图像上方会出现一些空白（这是“main”div的背景色，而不是整个页面）

下面是我用来淡入“game2”分区的javascript：

编辑：所以为了避开这个bug，我学会了一种不同的方法来实现我想做的事情

这是我的新javascript，它跳过了添加/删除类（转换非常奇怪，在Chrome中触发速度非常慢，但似乎可以正常工作）：

它可能需要一些加速，这需要永远发生在Firefox现在，第二和第三的使用“黑暗”类没有得到他们的不透明性改变了很长一段时间。甚至会让用户交互变得烦人

---

延误的原因是什么？如何提高代码的速度，使其在div显示一半时触发，然后当div位于视口顶部或底部上方时，它会淡出到50%的不透明度？

我不认为您做错了什么。它看起来像是Chrome中的一个bug？对我来说，它会在Chrome中延迟一段时间后自行修复，而不会出现在IE中

.main{
  position: relative;
  width: 100%;
  height: 15em;
  background: white url('../images/tacobg.png') no-repeat fixed 0 0;
  padding-top:1em;
}
.game2, .game3, .game4 {
  height:13.3333em;
  width:100%;}
.game2 {background:rgb(0,51,16) url('../images/potatobackground.png') no-repeat 0 0em;}
.game3 {background-color: rgb(0, 1, 82);}
.game4 {background-color: rgb(255, 80, 0);}
.dark {opacity: .5;} 

$(document).ready(function() {
   $(window).scroll(function() {
      if ($(window).scrollTop() > 100 ){

         $('.dark').addClass('show');

      } else {

         $('.dark').removeClass('show');

        };    
   });
});

$(document).ready(function(){
 $(window).scroll(function(){
  $('.dark').each(function(i){

   var half_object = $(this).position().top + ($(this).outerHeight()/2);
   var bottom_window = $(window).scrollTop() + $(window).height();
   var bottom_object = $(this).position().top + $(this).outerHeight();

   if(bottom_window > half_object){
    $(this).animate({'opacity':'1'},200);
   }
   else if(bottom_object > $(window).scrollTop()) {
    $(this).animate({'opacity':'.5'},200);
   }
  });
 });
});