0

一旦这些元素在 Web 浏览器/视口中可见，我正在尝试一个接一个地显示 3 个元素（测试 1、测试 2、测试 3）。我正在使用我在互联网上找到的以下代码。Fadein 可以工作，但它会在页面加载时立即启动，而不是在到达“航点”时由用户向下滚动触发。也许这是由于我不明白的偏移代码？在这种情况下它有什么作用？非常感谢

<script type="text/javascript">
$(document).ready(function() {
$('.test1').waypoint(function(event, direction) {
    $(this).fadeIn(1500);
}, {
    offset: function() {
       return -$(this).height();
    }
});

$('.test2').waypoint(function(event, direction) {
    $(this).fadeIn(2000);
}, {
    offset: function() {
       return -$(this).height();
    }
});

$('.test3').waypoint(function(event, direction) {
    $(this).fadeIn(2500);
}, {
    offset: function() {
       return -$(this).height();
    }
});
});
</script>
4

1 回答 1

1

元素与display:none它们可见时不在文档上的相同位置。这有点意思display:none。试图读取这些元素（如 Waypoints）位置的脚本通常会返回 a 0，就好像它们位于页面顶部一样，因此它们会立即触发。

解决此问题的最佳方法是停止使用display:none+fadeIn并切换到动画不透明度。下面的例子。

另外，Waypoints 2.0+ 版去掉了 event 参数，所以我也在这里删除了它。我也改变了你的偏移量。-$(this).height()当元素完全离开视口顶部时会触发淡入淡出。

$('.test1, .test2, .test3').css('opacity', 0);

$('.test1').waypoint(function(direction) {
  $(this).animate({ opacity: 1 }, 1500);
}, {
  offset: 'bottom-in-view'
});

// etc
于 2013-09-13T21:35:07.050 回答