0

我对此很陌生，但我使用的是 jQuery Waypoint，并且我试图在滚动到视图时让元素“淡入”。我遇到的问题是，当第一个元素滚动到视图中时，所有元素都会淡入。这意味着您只能在滚动时看到第一个元素 fadeIn。其余的淡入视口外。

我不明白如何让每个元素在滚动到视口时淡入。而不是一次所有元素都淡入...

这是我的代码：

      $(window).scroll(function () {
          $("#top-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#upper-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-main").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-sidebar-wrapper").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#lower-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#bottom-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#static-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-1").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-2").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-3").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-4").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-5").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
      });

编辑：根据要求，这是一个用于帮助调试的替代 jsFiddle：http: //jsfiddle.net/tUW8k/

4

2 回答 2

3

显示 none 的元素不在文档中的任何位置。他们报告自己生活在页面上的 0,0 坐标处。不要使用显示无元素作为航点。相反，将不透明度从 0 设置为 1。

于 2013-10-02T17:52:35.440 回答
0

拉小提琴，也展示一些CSS。您的 .waypoint() 函数仅应在您的选择通过滚动到可见时执行。您确定您的 css 以 display:none; 开头 对于那些元素？

于 2013-09-30T14:48:35.743 回答