使用动画 gif 更改图像

Question

我正在尝试使用动画 gif 更改图像。

有两张图片，一张是静态的，一张是动画的。点击黑色边框后，静态图片应该会变成一张动画，2秒后又会变回静态图片。

它可以工作，但由于某种原因，有时它不能正确同步。可能是由于 setimeout 功能？不过不确定。

$(document).ready(function () {
    var timer, timer2, timer3;
    $('#targetDIV_three').click(function () {
        window.clearTimeout(timer3);
        srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
        srcTonormalGif2 = "http://demo.pink-squid.co.uk/christmas/s3_bg.gif";
        $('#divthree_three').attr('src', srcToGif2);
        timer3 = window.setTimeout(function () {
            $("#divthree_three").attr('src', srcTonormalGif2);
        }, 800);
    });

});

JSfiddle -- http://jsfiddle.net/squidraj/wTKpL/

Answer 1

您必须致电timer3 而不仅仅是分配它。

是的，它是第一次工作。但是如果你继续点击 黑色边框框然后你会看到它不是结束或开始 第一帧。动画 gif 总共循环 1 秒。

更新

DEMO

$(document).ready(function () {
    var timer3;
    var clickCount = 0;
    $('#targetDIV_three').click(function () {
        window.clearTimeout(timer3);
        srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
        srcTonormalGif2 = "http://demo.pink-squid.co.uk/christmas/s3_bg.gif";
        if (clickCount == 0) $('#divthree_three').attr('src', srcToGif2);
        clickCount++;
        timer3 = window.setTimeout(function () {
            $("#divthree_three").attr('src', srcTonormalGif2);
            clickCount = 0;
        }, 2000);
        timer3();
    });
});