Question

我是一个新手，但我正在使用jQuery Waypoint，并且我在滚动到视图时尝试将元素设置为“fadeIn”。我遇到的问题是，当第一个元素滚动到视图中时，所有元素都会淡入。这意味着你只能在滚动时看到第一个元素fadeIn。其余部分在视口外淡出。

我不明白在滚动到视口时如何使每个元素变为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/

Answer 1

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

Answer 2

得到一个小提琴，也显示一些CSS。你的.waypoint（）函数只应在滚动到选择变得可见时执行。你确定你的css是以display：none开头的;对于那些元素？

jQuery Waypoints - 所有元素一次淡出而不是OnScroll

2 个答案: