jquery - 带有 animate.css 的 js-waypoints 以某种方式过早触发

Question

亲爱的stackoverflowers，

不知何故，我的航点在页面加载时触发，而不是在它们应该触发的时候触发。我的航路点的目标是，当它在视口中并且距离顶部 90% 时应该触发。然后它应该删除类 'hidden' 和 'animate fadeInUp'（使用 animate.css）。

有人有解决方案的想法吗？

---

这是当滚动到视口并且距离顶部 90% 时它应该触发的 HTML：

<div class="row hidden" id="waypoint">

那是我正在使用的 javascript，但目前在页面加载后会自动触发。

<script type="text/javascript">
$('#waypoint').waypoint(function() {
    $("#waypoint").removeClass("hidden");
    $("#waypoint").addClass("animated fadeInUp");
}, {
offset: '90%'
});
</script> 

这是我正在使用的 JS-Plugin 和 animate.css 的链接。

http://imakewebthings.com/jquery-waypoints/

http://daneden.me/animate/

---

感谢能够解开这个小谜团的人。

Answer 1

将其包裹在：

$(document).ready(function() {

$('#waypoint').waypoint(function() {
$("#waypoint").removeClass("hidden");
$("#waypoint").addClass("animated fadeInUp");
}, {
offset: '90%'
});

});