Change image on scroll and get it back when stop scrolling

HTML

<p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p>
<img src="http://bart.aoweb.nl/template%205/img/giphy.gif" alt="" id="imgAnimate">
<p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p><p>dfssfd</p>

JavaScript

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