使用动画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秒。

更新

演示

$(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();
    });
});