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

用动画gif更改图像

1 个答案:

已更新