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

我试图每秒(大致)改变图像的来源,以模仿动画gif,使用这些JPG.此动画在单击图像时开始.

这是我到目前为止使用的,虽然我确信它可以更好地编码.

此外,它现在还没有真正发挥作用; 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文档清楚地说明了这一点

.delay()方法最适合延迟排队的jQuery效果.因为它是有限的 - 例如,它没有提供取消延迟的方法 - .delay()不能替代JavaScript的本机setTimeout函数,这可能更适合某些用例.