start and stop GIF-animation (jQuery)

Snippet starts a GIF-Animation by swapping a static image for a specified time period. Two pictures are required. The function is activated by a click, but other ways are of course possible

<img id="img1" src="static_img" onclick="activateGIF(this, '#anim', 200)"/>
<img id="anim" src="anim_img"/>
<script type="text/javascript">
function activateGIF(id, anim, timeout) {
var animsrc = $(anim).attr('src'); //Get anim src
var src = $(id).attr('src'); //Get static img src
var onclick = $(id).attr('onclick'); //Get onclick
$(id).attr('src', animsrc).removeAttr('onclick').show(); //Attribute onclick should be removed, 'cause this function gets fired every time a clickevent gets fired
setTimeout(function(){$(id).attr('src', src).attr('width', '666').attr('height', '583').attr('onclick', onclick);}, timeout); //sets timeout, so animation 'stops'
}
</script>

Welcome to TagMyCode

start and stop GIF-animation (jQuery)

Write a comment