Javascript 滚动事件上的jquery

我正试图让它这样一个img改变为gif当用户在一个网站上滚动

HTML

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

我得到了这个，但现在它是当你在img上悬停时，它变成了gif。 当用户滚动时，我如何实现这一点

---

如果您能帮助我，谢谢您。

目前您正在检查图像是否悬停，然后才更改其来源。而是将

滚动

事件侦听器附加到

文档

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

---

滚动时，可以使用此代码

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

---

使用

$（窗口）。滚动
，而不是
$（“#imgAnimate”）.hover
@Mohammad no这不起作用你是说当用户滚动到图像本身还是一般滚动时？当用户用鼠标滚轮滚动时，图像需要更改为gif，当用户停止滚动时，gif需要更改回gifimage@Mohammad如果我使用.scroll在那里，它不知道在哪里放置Images我尝试了这个代码，但是当我不滚动的时候gif已经在移动了，或者我需要在我的HTML中做些改变吗？我的gues可以工作，但是用这个代码它不知道gif应该放在哪里，我的gues不能完全工作，就像我想要的，这里是一个链接，这是我正在做的，我想让角色平滑移动，但是当你现在滚动有点奇怪，你知道一种解决方法吗？好的，我更新了答案，我希望这就是你想要的，在这里也可以看到摆弄你的真实例子
(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 );