Jquery 使用动画gif更改图像

我正在尝试使用动画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--

您必须调用

timer3

，而不仅仅是分配它

---

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

更新

---

到底应该发生什么？有两个图像。一个是静态图像，一个是动画图像。单击黑色边框框后，静态图像应更改为动画图像，然后在2秒钟后，它将再次返回静态图像。在2秒钟内，800应该是2000。动画gif是否在2秒钟内完成循环？总时间范围循环的时间是1秒，即1000帧，由30帧组成。是的，它第一次工作。但是如果你继续点击黑色边框框，你会看到它不是从第一帧开始或结束。动画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();
    });
});