javascript - 清除 onScreen 插件中的 setInterval 以在视口中更改类

Question

嗨，当元素滚动到视口时，我正在使用onScreen 插件更改元素上的类。即使元素在视口中并且当元素不在视口中时，我想在几秒钟后删除该类，该元素不应该像插件的设计方式那样具有类（我认为）。

所以当用户滚动到元素时，应该添加类以显示用户正在寻找的元素。然后应该在几秒钟后将其删除，以表明它是页面上的常规内容。

我想我在插件中注意到，当元素在视口中时，setInterval 会不断添加类，所以我试图清除间隔，这样它就不会设置类，但它不起作用。

$( document ).ready( function() {
    $( function() {
        var id = setInterval( function() { ("#link").removeClass("red").filter(":onScreen").addClass("red").delay(2000).queue(function() {
           $(this).removeClass("red");
            });
        }, 1000 );

   });
   function remove() {
      if ( $("#link").hasClass("red") ) {
          setTimeout(function() { clearInterval( id ); }, 3000 )
          $("#link").removeClass("red");
      }
   }
   remove();

请帮助我在元素在视口中几秒钟后以及显示添加的类之后删除该类。谢谢你的帮助。

这是Jsfiddle。

Answer 1

我建议你改用这个插件。它有两种方法可用于在匹配元素进入或离开视口时对其进行处理，如下所示：

$('#link').onScreen({
  doIn: function() {
    $(this).addClass('red');
  },
  doOut: function() {
    $(this).removeClass('red');
  }
});