I have two images: static and animated. I am trying to play that animated image but only once. After that, it will change to static one.

My Code:

$(document).ready(function () {
    $('#targetDIV_three').bind('click mousedown', function () {
        srcToGif2 = ".gif";
        $("#divthree_three").attr('src', srcToGif2);
    });
});

Fiddle : /

Currently, it is not stopping after the first animation.

Latest fiddle with single animated loop gif.

/

Now can't see the animation though the img src is changing.

I have two images: static and animated. I am trying to play that animated image but only once. After that, it will change to static one.

My Code:

$(document).ready(function () {
    $('#targetDIV_three').bind('click mousedown', function () {
        srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
        $("#divthree_three").attr('src', srcToGif2);
    });
});

Fiddle : http://jsfiddle/squidraj/33Sqd/

Currently, it is not stopping after the first animation.

Latest fiddle with single animated loop gif.

http://jsfiddle/squidraj/4rC8D/1/

Now can't see the animation though the img src is changing.

• javascript
• jquery
• animation
• gif

• 3 Give me a good reason why this gif should ever stop playing? – idmean Commented Dec 12, 2013 at 13:05
• Because there are few more in the queue same like this tentacles and bells. The user should not be confused by too many animations playing at the same time. – Prithviraj Mitra Commented Dec 12, 2013 at 13:10
• 2 Don't loop the gif.... – epascarello Commented Dec 12, 2013 at 13:31

3 Answers 3

If you want this animated GIF to be played only once, modify it in Photoshop. Go to Window > Timeline, then select looping options (bottom left corner):

Save for web as GIF and voila!

Working Fiddle

Try This:

$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);

function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
    i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
    for (var j = 0, a; a = i.attributes[j]; j++)
        c.setAttribute(a.name, a.value);
    i.parentNode.replaceChild(c, i);
}
}
      });
});

For getting desired effect you can setTimeout to trigger click event #targetDIV_three

Chnage your code to this. A timeout is set to set the old gif again.

$(document).ready(function () {
    $('#targetDIV_three').bind('click mousedown', function () {
        srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
        $("#divthree_three").attr('src', srcToGif2);
        setTimeout(function(){
            $("#divthree_three").attr('src', "http://demo.pink-squid.co.uk/christmas/s3_bg.gif");
        },900);
    });
});

http://jsfiddle/33Sqd/2/