jQuery图像替换动画(模仿gif动画)

Question

我有一个 JPGS 序列，格式为:

Logo_1001.jpg
Logo_1002.jpg
Logo_1003.jpg
Logo_1004.jpg
Logo_1005.jpg
...
all the way to
Logo_1208.jpg

我试图使用这些 JPG 每秒(大致)更改图像的来源以模仿动画 gif。当他们点击图像时，该动画就会开始。

这是我迄今为止正在使用的内容，尽管我确信它可以编码得更好。

此外，它现在运行得不太好；x

function StartAnimation() {
    var name = $('#logo').attr('src');
    var index = name.indexOf(".jpg");

    var int = name.slice(index-4,index);

    while(int<1208){
        int++;

        var newname=name.slice(0,index-4);
        newname=newname+int;
        name=newname+".jpg";

        $('#logo').attr('src',name).delay(500);
    }
}

$("#logo").click(function() {
    StartAnimation()
});

想法？援助？

谢谢

Answer 1

刚刚使用 setTimeout 实现了此功能。

$("#logo").click(function() {
    var $logo = $(this), src = $logo.attr("src");
    var index = src.indexOf('.jpg');
    var step = +src.slice(index-4, index);

    function frame() {
        step++;
        if(step < 1050) {
            var newSrc = src.slice(0, index-4) + step + ".jpg";
            console.log(newSrc);
            $logo.attr('src', newSrc);
            setTimeout(frame, 1000);
        }
    }

    frame();
});

http://jsfiddle.net/DgZ4M/

您的脚本的问题在于使用.delay。它仅在链接 jQuery UI 动画时有用，而不是任意延迟。 jQuery 文档清楚地说明了这一点

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.