javascript - 屏幕插件在错误的时间加载类名

Question

这onscreen插件旨在仅在元素位于视口(viewport)内时将类名添加到元素，但是它似乎在页面加载后立即添加类名，这不是本意。

$(function() {
  setInterval(function() {
  $("#star").filter(":onScreen").addClass('animated bounceInRight');
  }, 0)                             
})

我在这个插件中使用它，它是一个书籍效果插件，我认为它在某种程度上与屏幕冲突:http://pastebin.com/UmyJ6zBW这个插件需要在一页上有不同的部分才能工作。在第一部分中使用时在屏幕上工作，但在实际未显示的其他部分中时中断。我该如何解决这个问题？

Answer 1

您可以做三件事中的一件。

1. 别打扰了。通常，您无需担心不在 View 中的元素的样式。
2. 使用 setInterval() 但将间隔减少到可接受的最小值但不少于约 20 毫秒。
3. [首选] 建立一个事件处理程序，以响应导致您的 #star 元素移入/移出屏幕的任何原因。

对于第三种方法:

• jQuery 动画提供了一个 step 回调，它会在每个动画步骤执行时触发。
• 由于滚动文档也会导致元素进入/离开 View ，您可能还需要一个scroll 处理程序。

小心点，您应该能够编写一个函数并将其用于两个目的。