How to activate gif on mouseover in wordpress thumbnails?

Question

gif

Greetings!
There is a blog on Wordpress, on the main page all posts with thumbnails for them are displayed, in gif thumbnails with animation. Actually the question is: How to make the animation spin not constantly, but when you hover the mouse? I found the GIF Animation Preview plugin , but unfortunately it does not work with thumbnails, there is already a topic on this topic in the support of this plugin, but there is no answer there. Please let me know the solution, thanks in advance!

Answer 1

Let's start with the fact that this is only possible in one case - you have, in addition to the animated gif-file, another file - without animation.
Let the first ones be called animated_xx.gif, and the second ones - nonanimated_xx.gif
Then the code will help you:

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('non', ''));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

All that remains to be done is to create a copy of it without animation (or load two files at a time) in the same place when saving the picture.