0

こんにちは、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です。

4

1 に答える 1

0

代わりにこのプラグインを使用することをお勧めします。一致した要素がビューポートに出入りするときに使用できる 2 つの方法があります。

$('#link').onScreen({
  doIn: function() {
    $(this).addClass('red');
  },
  doOut: function() {
    $(this).removeClass('red');
  }
});
于 2013-11-05T00:54:55.587 に答える