Question

一旦这些元素在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>

Answer 1

带有display:none的元素与文档在同一位置不同。这是display:none的重点。尝试读取像Waypoints这些元素的位置的脚本通常会传回0，好像它们位于页面顶部一样，因此它们会立即触发。

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

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

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

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

// etc

使用waypoints插件逐个显示元素

1 个答案: