Is this possible? I did some google search but don't seem to find anything. What I want would be kind of like a stop/play function to a gif image.
Would be awesome.
No. Gifs are played by the browser. There is nothing you can do about it.
The only thing you can do is replace the image with a placeholder. But that will not stop and start the gif at specific locations of the animation, right when you click/toggle.
https://stackoverflow.com/a/6017468/873792
Unfortunately, the DOM doesn't expose individual frames of a GIF, so this is done by downloading the GIF (with XMLHttpRequest), parsing it, and drawing it on a canvas.
You cannot control a GIF with jquery, I've tried many times.
What you can do is use libraries to split into single frames and then show one of these as a placeholder instead.