jquery와 함께 성공적인 이미지가 변경됩니다.

Question

안녕하세요 저는 재미있는 게임처럼 마리오를 만들고, 팔과 다리를 움직이면 마리오가 자신을 움직이게 만듭니다. 나는 그것을위한 코드를 가지고있다. 그리고 그것을 해체한다면, 실제로는 볼 수 있도록 공간을 할당하지 못했다. 지금까지 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); 
}; 

사람이 많이 주시면 감사하겠습니다 :) 당신은 질문이있는 경우를 몇 가지 이유로 지연이 모든 jQuery를 기능이 작동하지 않습니다에 대한

Answer 1

을 물어, 그래서 제발 당신에게 대단히 감사합니다 도움이 될 수있는 경우 간격을 사용해야합니다. 이 코드를 사용해보세요. 내게 도움이되었습니다.

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

Answer 2

이것은 내 해결책입니다. Jsfiddle Example. 지연 없음, 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