使用jquery连续更改图像

嗨，我正在做一个像马里奥一样的游戏来取乐，我一直在做马里奥的动画，比如让他的手臂/腿动。我有它的代码，如果我把它分解，它会工作，但是到目前为止，我没有将它隔开，使它实际上是可见的。 到目前为止，我已经尝试了setTimeout和.delay，但两者都不起作用

下面是我目前使用.delay函数的js代码

function animateMario() {
    // cycles through other 4 images
    for (var i=1; i<5; i++) {
        $('#mario').attr('src', 'images/mario/mario_f_'+i+'.png').delay(100);
    }

    // returns to original image
    $('#mario').attr('src', 'images/mario/mario_f_0.png').delay(100);
};

函数animateMario（）{
//循环浏览其他4个图像
对于（var i=1；i，由于某些原因，延迟并不适用于所有jQuery函数，因此您需要使用interval。请尝试以下代码，它适用于我：

function animateMario() {
    var i = 1;
    var timer = setInterval(function(){
        $('#mario').attr('src', 'images/mario/mario_f_'+i+'.png');
        i++
        if(i==5){
            clearInterval(timer);
            $('#mario').delay(1000*(i+1)).attr('src', 'images/mario/mario_f_0.png');
        }
    }, 100)
};

这是我的解决方案。
无延迟，无需jQuery:）
查看简单代码。

 //select the element with the #mario ID
 var el_image = document.getElementById('mario');

 //array with the image
 var img = [
            'http://u.cubeupload.com/FollowTheWeb/1.png',
            'http://u.cubeupload.com/FollowTheWeb/2.png',
            'http://u.cubeupload.com/FollowTheWeb/3.png',
            'http://u.cubeupload.com/FollowTheWeb/4.png',
            'http://u.cubeupload.com/FollowTheWeb/5.png'
           ];


 //functionfor create the animation
 var i=0;
 function frame_switch ()
 {
   el_image.src = img[i]; //change the src attribute

     if(i > 3){  //is the index is 4 set i=0
         i=0;
     }else{i++; }
 }


 setInterval(frame_switch,150);  //repeat the function frame_swith() each 150ms

请发布更多的代码…不足以继续。更好的是，创建一个。如果可能，我建议您创建一个精灵表并更改位置。我在dropbox上的以下链接下有代码，这包括您添加的内容，但似乎仍然不起作用：/谢谢回复：）编辑了我的答案，看一看！可能吗要让动画只在上一个动画完成后重复，就像在按下关键点的那一刻，它正确地完成了第一个动画，但随后又以极快的速度完成了其余的动画，有没有办法纠正这个问题？我尝试让setInterval以不精确的方式运行，直到keyup，但这不起作用，有什么建议吗？我添加了一个var complete并在启动另一个动画之前检查它是否完成。检查这里：看起来不错，但我使用jQuery的原因是我可以在keydownkeydown上激活动画是一个JS事件，jQuery不创建事件，而是创建快捷方式。object.onKeyDown=$（）.keydown（）