Javascript 如何淡入DIV'；什么是正确的滚动？

目前正在努力解决这个问题。。我正在建立一个网站，它完全基于100%的宽度/高度分区，所以我不确定这是否是JS不工作的原因。但是，我试图让下面的代码示例在每次滚动到下一节时淡入

<div class="hideme">
    <a href="#" id="display" class="display">
        <div class="navigation arrowdown pa2">
            <span style="color:#fff;">The mission is here</span>
        </div><!--end arrowdown-->
    </a><!--end display-->
</div><!--end hideme-->

我用同样的方法重复了一遍

<div class="hideme">
    <a href="#" id="display" class="display">
        <div class="navigation arrowdown pa3">
            <span style="color:#fff;">The solution is here</span>
        </div><!--end arrowdown-->
    </a><!--end display-->
</div><!--end hideme-->

这是我的JS；第二部分按预期工作，但第三部分未按预期工作

<script type="text/javascript">
  $(document).ready(function() {

      /* Every time the window is scrolled ... */
      $(window).scroll( function(){

          /* Check the location of each desired element */
          $('.hideme').each( function(i){

              var bottom_of_object = $(this).position().top + $(this).outerHeight();
              var bottom_of_window = $(window).scrollTop() + $(window).height();

              /* If the object is completely visible in the window, fade it it */
              if( bottom_of_window > bottom_of_object ){

                  $(this).animate({'opacity':'1'},5000);

              }

          }); 

      });

  });
</script>

$（文档）.ready（函数（）{
/*每次滚动窗口时*/
$（窗口）。滚动（函数（）{
/*检查每个所需元件的位置*/
$（'.hideme'）。每个（函数（i）{
变量bottom\u of_object=$（this.position（）.top+$（this.outerHeight（））；
var bottom_of_window=$（window.scrollTop（）+$（window.height（））；
/*如果对象在窗口中完全可见，请将其淡入淡出*/
if（窗口的底部>对象的底部）{
$（this.animate（{'opacity'：'1'}，5000）；
}
}); 
});
});

以下是我正在工作的现场站点：

---

我缺少的任何东西，或者我不能使用相同的hideme类，因为它的不透明度已经为1？感谢您花时间阅读此文章！祝你度过愉快的一周。

我认为在底部比较中有一些东西没有被正确地计算出来。看看是否可以在比较行中添加一个断点，这是在一个事件侦听器中，该侦听器将触发很多次，但是使用Chrome DevTools，您可以“编辑断点”，并给出一个条件，当满足该条件时，将为您激活断点

例如：

bottom_of_object < 520px

_对象的底部_<520px

另外，请务必了解requestAnimationFrame如何帮助您提高站点的性能。现在我在滚动网站时获得10-13 FPS（应该尽可能接近60 FPS）。从渲染的角度来看，这将导致很多令人讨厌的行为，并导致糟糕的用户体验

---

另一个建议是，一旦将不透明度设置为1，就实际隐藏该元素。即使隐藏元素不可见，也无法提取任何隐藏元素进行渲染。

您在循环中使用了animate，这将永远无法工作，因为javascript中的所有迭代都是异步的

但是，您可以将

setTimeOut

与闭包一起用于循环，它的工作方式类似于回调，除非最后一个完成，否则下一个未启动，因此将能够看到您的动画

---

我最好的解决办法是

将您的代码添加到jsfiddle中是最好放在我的整个站点上，还是放在这个确切的代码上？我不确定是我的其他脚本影响了我还是它本身。我想现场检查是最简单的，谢谢你的建议！！您所要做的只是添加一个示例代码（html/css/js），而不是添加整个站点。祝你一切顺利如果您不确定其他脚本是否会影响它，那么请找出原因！我们不是来调试您的代码的，我们是来帮助您调试代码但找不到问题的。如果你孤立这个问题，你可能会发现你最终会自己解决它。你完全是对的，这就是为什么我在这里发布它的主要原因，因为我花时间一次删除一个JS脚本，并在firebug和console中。越来越好，但我想我可能对剧本有点问题。只是想看看脚本在技术上是否有效，而不是让人们调试我的工作。谢谢你对Christian的评论，祝你有个很棒的一周！如果迭代是您想要的，

setInterval

优于

setTimeout

。但无论如何，在这种情况下，你不应该使用它。