очистка setInterval в плагине onScreen для изменения класса в окне просмотра

Question

очистка setInterval в плагине onScreen для изменения класса в окне просмотра

0

Привет, я использую плагин onScreen для изменения класса в элементе, когда он прокручивается в viewport. Я хотел бы удалить класс через несколько секунд, даже если элемент находится в окне просмотра, и когда элемент отсутствует в области просмотра, элемент не должен иметь класс, как тот, который был разработан плагином (я думаю).

поэтому, когда пользователь прокручивает элемент, класс должен быть добавлен, чтобы показать, что это тот элемент, который ищет пользователь. Затем он должен быть удален через несколько секунд, чтобы показать, что это обычный контент на странице.

Я думаю, что в плагине я заметил, что когда элемент находится в области просмотра, 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.

jack blank 19 сен. 2013, в 05:21

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Silvestre Herrera · Answer 1 · 2013-11-04T23-16-00.000Z

Я бы рекомендовал вам использовать этот плагин. У этого есть два метода, которые вы можете использовать, чтобы делать вещи согласованным элементам, поскольку они входят или выходят из окна просмотра так:

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