如何在setTimeout中删除图像?

时间:2014-10-21 02:46:20

标签: javascript jquery image settimeout

        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)?

1 个答案:

答案 0 :(得分:0)

如果您要通过jQuery进行动画处理,可以在所有动画上调用.stop()并对动画进行始终操作以隐藏照片。这样,即使你处于动画的中间,动画也会停止,立即停止到下一个动画。