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

Question

这个屏幕插件旨在仅在元素位于视口内时将类名添加到元素，但是它似乎在页面加载后立即添加类名，这不是要发生的事情。

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

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

Answer 1

你可以做三件事之一。

1. 不要打扰。一般来说，您不必担心不在视图中的元素的样式。
2. 使用setInterval()但将间隔减小到最小可接受值但不小于约 20 毫秒。
3. [首选] 建立一个事件处理程序，以响应任何导致您的#star元素在屏幕上/离开屏幕的原因而触发。

对于第三种方法：

• jQuery 动画提供了一个step回调，该回调在每个动画步骤执行时触发。
• 由于滚动文档也会导致元素进出视图，因此您可能还需要一个scroll处理程序。

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