スクロールイベントのjquery

Question

ユーザーがサイトをスクロールしているときにimgがgifに変わるようにしようとしています。

HTML

<img src="img/giphy.gif" alt="" id="imgAnimate"> 

jQueryの

$(document).ready(function() 
     { 
      $("#imgAnimate").hover(
       function() 
       { 
        $(this).attr("src", "img/giphy.gif"); 
       }, 
       function() 
       { 
        $(this).attr("src", "img/giphy.png"); 
       }); 
     }); 

私はこれを得たが、今はそれがGIFに変更IMGの上に置くと、それがあります。 ユーザーがスクロールしているときにどうすればいいのですか？

お手伝いがありがとうございます。

Answer 1

https://jsfiddle.net/q6Lun0dj/1/

は、このスクリプトを使用することができますスクロールを停止するとき、あなたはこのコード

$(document).ready(function(){ 
     $(window).scroll(function(){ 
       $(this).attr("src", "img/giphy.gif"); 
      }); 
    }); 

を使用することができます。

(function($) { 
    $(function() { 
    var scrollNow = false; 
    $(window).scroll(function() { 
     if(!scrollNow){ 
     scrollNow = true; 
     $("#imgAnimate").attr("src", "http://bart.aoweb.nl/template%205/img/giphy.gif"); 
     } 
     clearTimeout($.data(this, "scrollCheck")); 
     $.data(this, "scrollCheck", setTimeout(function() { 
     scrollNow = false; 
     $("#imgAnimate").attr("src", "http://bart.aoweb.nl/template%205/img/giphy.png"); 
     }, 250)); 

    }); 

    }); 

})(jQuery); 

を10

Answer 2

現在、イメージがホバリングされているかどうかを確認していて、ソースを変更しています。代わりに、documentにscrollイベントリスナーを添付します。

$(document).on('scroll', callback); 

Answer 3

あなたがスクロールすると、あなたが Event when user stops scrolling