setTimeout 동안 이미지를 제거하는 방법은 무엇입니까?

Question

 case FOCUS_AA: 
     if(keyCode == KEY_RIGHT){ 
      focus = FOCUS_AB; 

      clearTimeout(a); 

      document.getElementById("background").style.display = "block"; 
      document.getElementById("backLight").style.display = "block"; 
      document.getElementById("treeBoard").style.display = "block"; 
      document.getElementById("bImg").style.display = "block"; 
      document.getElementById("aImg").style.display = "none"; 
      document.getElementById("a0").style.display = "none"; 
      document.getElementById('banana').play(); 
      banana1(); 


      function banana1(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b0").style.display = "block"; 
       /*var a = setTimeout(apple2, 1000);*/ 
       b = setTimeout(banana2, 1000); 
      } 
      function banana2(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b0").style.display = "none"; 
       document.getElementById("b1").style.display = "block"; 
       b = setTimeout(banana3, 1000); 
      } 
      function banana3(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b1").style.display = "none"; 
       document.getElementById("b2").style.display = "block"; 
       b = setTimeout(banana4, 1000); 
      } 
      function banana4(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b2").style.display = "none"; 
       document.getElementById("b3").style.display = "block"; 
       b = setTimeout(banana5, 1000); 
      } 
      function banana5(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b3").style.display = "none"; 
       document.getElementById("b4").style.display = "block"; 
       b = setTimeout(banana6, 1000); 
      } 
      function banana6(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b4").style.display = "none"; 
       document.getElementById("b5").style.display = "block"; 
       b = setTimeout(banana7, 1000); 
      } 
      function banana7(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b5").style.display = "none"; 
       document.getElementById("b6").style.display = "block"; 
       b = setTimeout(banana8, 1000); 
      }function banana8(){ 
       document.getElementById("bImg").style.display = "block";  
       document.getElementById("b6").style.display = "none"; 
       document.getElementById("b0").style.display = "block"; 
       b = setTimeout(banana8, 1000); 
      } 
     }else if(keyCode == KEY_BACK){ 
      focus == FOCUS_A 
      window.location.href = 'Shop.html'; 
     } 
    break; 
case FOCUS_AB: 
     if(keyCode == KEY_LEFT){ 
      focus = FOCUS_AA; 

      clearTimeout(b); 

      document.getElementById("background").style.display = "block"; 
      document.getElementById("backLight").style.display = "block"; 
      document.getElementById("treeBoard").style.display = "block"; 
      document.getElementById("a0").style.display = "block"; 
      document.getElementById("aImg").style.display = "block"; 
      document.getElementById("bImg").style.display = "none"; 
      document.getElementById("b0").style.display = "none"; 
      document.getElementById('apple').play(); 


      apple0(); 

      function apple0(){ 
       document.getElementById("aImg").style.display = "block";  
       document.getElementById("a0").style.display = "block"; 
       a = setTimeout(apple1, 1000); 
      } 
      function apple1(){ 
       document.getElementById("aImg").style.display = "block";  
       document.getElementById("a0").style.display = "none"; 
       document.getElementById("a1").style.display = "block"; 
       a = setTimeout(apple2, 1000); 
      } 
      function apple2(){ 
       document.getElementById("aImg").style.display = "block";  
       document.getElementById("a1").style.display = "none"; 
       document.getElementById("a2").style.display = "block"; 
       a = setTimeout(apple3, 1000); 
      } 
      function apple3(){ 
       document.getElementById("aImg").style.display = "block";  
       document.getElementById("a2").style.display = "none"; 
       document.getElementById("a3").style.display = "block"; 
       a = setTimeout(apple4, 1000); 
      } 
      function apple4(){ 
       document.getElementById("aImg").style.display = "block";  
       document.getElementById("a3").style.display = "none"; 
       document.getElementById("a4").style.display = "block"; 
       a = setTimeout(apple5, 1000); 
      } 
      function apple5(){ 
       document.getElementById("aImg").style.display = "block";  
       document.getElementById("a4").style.display = "none"; 
       document.getElementById("a5").style.display = "block"; 
       a = setTimeout(apple6, 1000); 
      } 
      function apple6(){ 
       document.getElementById("aImg").style.display = "block";  
       document.getElementById("a5").style.display = "none"; 
       document.getElementById("a0").style.display = "block"; 
       a = setTimeout(apple6, 1000); 
      } 
     }else if(keyCode == KEY_RIGHT){ 
      focus = FOCUS_AC; 
      clearTimeout(b); 
      document.getElementById('b_').style.display ='none'; 
      document.getElementById("background").style.display = "block"; 
      document.getElementById("backLight").style.display = "block"; 
      document.getElementById("treeBoard").style.display = "block"; 
      document.getElementById("c0").style.display = "block"; 
      document.getElementById("cImg").style.display = "block"; 
      document.getElementById("bImg").style.display = "none"; 
      document.getElementById("b0").style.display = "none"; 
      document.getElementById('cake').play(); 
      cake1(); 
      function cake1(){ 
       document.getElementById("cImg").style.display = "block";  
       document.getElementById("c0").style.display = "block"; 
       c = setTimeout(cake2, 1000); 
      } 
      function cake2(){ 
       document.getElementById("cImg").style.display = "block";  
       document.getElementById("c0").style.display = "none"; 
       document.getElementById("c1").style.display = "block"; 
       c = setTimeout(cake3, 1000); 
      } 
      function cake3(){ 
       document.getElementById("cImg").style.display = "block";  
       document.getElementById("c1").style.display = "none"; 
       document.getElementById("c2").style.display = "block"; 
       c = setTimeout(cake4, 1000); 
      } 
      function cake4(){ 
       document.getElementById("cImg").style.display = "block";  
       document.getElementById("c2").style.display = "none"; 
       document.getElementById("c3").style.display = "block"; 
       c = setTimeout(cake5, 1000); 
      } 
      function cake5(){ 
       document.getElementById("cImg").style.display = "block";  
       document.getElementById("c3").style.display = "none"; 
       document.getElementById("c4").style.display = "block"; 
       c = setTimeout(cake6, 1000); 
      } 
      function cake6(){ 
       document.getElementById("cImg").style.display = "block";  
       document.getElementById("c4").style.display = "none"; 
       document.getElementById("c0").style.display = "block"; 
       c = setTimeout(cake6, 1000); 
      } 
     } else if(keyCode == KEY_BACK){ 
      focus == FOCUS_B 
      window.location.href = 'Shop.html'; 
     } 
    break; 

이렇게하면 setTimeout을 사용하여 이미지가 애니메이션으로 표시됩니다. "KEY_RIGHT"를 누르면 이미지가 정지되고 다음 애니메이션 이미지가 표시됩니다. 하지만 정지 된 이미지 및 다음 이미지와 이미지가 겹치게됩니다. 다음 단계 (FOCUS_AB) 키를 누르면 중지되거나 이전 이미지 (FOCUS_AA)가 모두 제거됩니다.

Answer 1

jQuery를 통해 애니메이션을 만들려면 모든 애니메이션에서 .stop()을 호출하고 애니메이션의 액션은 사진을 숨길 수 있습니다. 그런 식으로, 비록 당신이 애니메이션의 중간에 있었다고해도, 애니메이션은 멈출 것이고, 끝으로 곧 갈 것이고 다음 애니메이션이 갈 것입니다.