Is it possible to control gif on :hover?

Question

JavaScript

Tell me, is there any plugin on jQuery that, when hovering over a picture.gif, the animation of the gif itself would work, and when the cursor was removed from the picture, it would play in the opposite direction (regardless of whether the gif played to the end or not) ??

I saw something similar on one site, but it was done through svg, it’s very difficult and the structure of all this is not clear.
And another question is why, with a hover, if the GIF plays to the end, then with a second hover, it immediately takes on the final form? Can this one be fixed somehow so that with every hover it starts all over again ???

Answer 1

Read about the principles of KISS, Dry. And about strict / non-strict comparison in JS.
Specifically for this code - that's enough, I think.
In general, for refactoring it would be nice to understand the complexity of basic algorithms - link , another link
Well, it's good to know the language. For example, do not litter the global scope with vars in 2019 :) To be honest, it seems that you can remember about the indexOf method and reduce this function at times

Answer 2

For example:

<div class="gif">
 <img src="animation.gif">
</div>

.gif {
 width: 100px;
 height: 100px;
 background: url(static.jpg);
}

.gif img {
 display: none;
}

.gif:hover img {
 display: block;
}