Question

目前正试图找出这个..我正在构建一个网站，它的所有基于100％宽度/高度div部分，所以我不确定这是否是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>

以下是我正在处理的实时网站：http://bit.ly/1eGCShX

我缺少的任何东西，或者我不能使用相同的hideme类导致它已经是1的不透明度？感谢您抽出宝贵时间阅读本文！祝你度过愉快的一周。

Answer 1

我认为在最底层比较中有些东西没有被正确找出。看看你是否可以在比较线上添加一个断点，它会在一个事件监听器中大量激活，但是使用Chrome DevTools可以“编辑断点”并给出一个条件，当条件为满足。

例如：

bottom_of_object < 520px

另外，请查看requestAnimationFrame如何帮助您了解网站的性能。现在我在滚动网站时得到10-13 FPS（尽可能接近60）。从渲染的角度来看，这将导致许多笨拙的行为，并导致糟糕的用户体验。

另一个建议是在将不透明度设置为1后实际隐藏元素。即使它们不可见，仍然可以拾取任何隐藏元素进行渲染。

Answer 2

我最好的解决方案是wow.js！

Answer 3

你在循环中使用了animate而不会工作，因为javascript中的所有迭代都是异步的。

然而，你可以使用setTimeOut关闭循环，它就像一个回调，除非最后一个完成，下一个没有启动，所以将能够看到你的动画。

How to write closures

如何正确地滚动DIV的滚动？

3 个答案: