如何淡入DIV的正确滚动？

目前试图找出这个..我建立一个网站，它的所有基于100％宽度/高度div部分，所以我不知道这是为什么JS不工作。不过，我试图让每个滚动到下一节的代码示例都在下面淡出。如何淡入DIV的正确滚动？

<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

凡是我的思念，或导致它已经1混浊我不能使用相同的hideme类？感谢您花时间阅读本文！祝你有个愉快的一周。

来源

2014-02-11 DoPeT

在jsfiddle中添加您的代码 – Abhidev

将我的整个网站或此确切代码放在最好吗？我不确定它是否可能影响我自己的其他脚本。通过实时检测是最简单的，感谢您的建议！ – DoPeT

所有你需要做的就是添加一个示例代码（html/css/js），而不是整个网站。祝一切顺利。 :) – Abhidev

我这个最好的解决办法是wow.js！

来源

2014-03-09 10:22:34 DoPeT

我在想，在底部比较中有些东西没有正确计算出来。查看是否可以在比较行中添加断点，它位于事件侦听器中，该事件侦听器将触发大量事件，但使用Chrome DevTools，您可以“编辑断点”并给出条件以便在条件满足时为您激活断点满足。

例如：

bottom_of_object < 520px

另外，不要看一看requestAnimationFrame如何能帮助你的站点的性能。目前，我正在滚动网站时获得10-13 FPS（应尽可能接近60）。从渲染的角度来看，这会导致很多令人反感的行为，并导致糟糕的用户体验。

另一个建议是在将不透明度设置为1后实际隐藏元素。尽管隐藏元素不可见，但仍然可以拾取隐藏元素。

来源

2014-02-11 06:31:24 alexK85

您已经在循环中使用了动画，而不会工作，因为JavaScript中的所有迭代都是异步的。

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

How to write closures

来源

2014-02-11 07:29:24 Alex

如果迭代是你想要的，'setInterval'比'setTimeout'更好。但无论如何你都不应该在这种情况下使用它。 –

如何淡入DIV的正确滚动？

回答

相关问题