×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

start and stop GIF-animation (jQuery)

1
0
 
0
Language: Javascript
Posted by: Stefano Paggi
Added: Apr 14, 2014 7:56 PM
Views: 507
Tags: animation gif html javascript
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
  1. <img id="img1" src="static_img" onclick="activateGIF(this, '#anim', 200)"/> <!-- static img -->
  2. <img id="anim" src="anim_img"/> <!-- Animation -->
  3. <script type="text/javascript">
  4. function activateGIF(id, anim, timeout) {
  5.     var animsrc = $(anim).attr('src'); //Get anim src
  6.     var src = $(id).attr('src'); //Get static img src
  7.     var onclick = $(id).attr('onclick'); //Get onclick
  8.     $(id).attr('src', animsrc).removeAttr('onclick').show(); //Attribute onclick should be removed, 'cause this function gets fired every time a clickevent gets fired
  9.     setTimeout(function(){$(id).attr('src', src).attr('width', '666').attr('height', '583').attr('onclick', onclick);}, timeout); //sets timeout, so animation 'stops'
  10. }
  11. </script>
  12.  

Write a comment

To post comments, please log in or register.