jquery on scroll event

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"); 
       }); 
     }); 

Я получил это, но теперь, когда вы наведите курсор мыши на IMG он изменяется в GIF. Как это сделать, когда пользователь прокручивает.

Спасибо, если вы можете мне помочь.

Answer 1

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

использовать этот скрипт:

(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); 

Answer 2

В настоящее время вы проверяете, не виден ли изображение и только потом его источник. Вместо этого подключите прослушиватель событий scroll к document.

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

Answer 3

При прокрутке, вы можете использовать этот код

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

при остановке прокрутки вы можете Event when user stops scrolling