0

ユーザーがいずれかの画像をクリックすると、すべての画像 (images_holder) がゆっくりとフェードアウトします。その後、別の画像がフェードインし、3 秒後にその画像がフェードアウトします。その後、 images_holder が再びフェードインします。私の問題は、フェーダーが完了する前に、secondStep 関数が既に実行されていることです。

私が望むのは、フェーダー機能が完了した最初の最初のステップを終了し、その後、2 番目のステップが実行されることです。このコールバックを作成しようとしましたが、うまくいきませんでした。

これが私のhtmlです

<div id="container">
    <!--<img src="images/background.jpg"/>-->
    <div id="faces_holder">
        <img id="face1" onclick="loadUnload(1)" src="images/face_03.png" width=350; height=656;/><img id="face2" onclick="loadUnload(2)" src="images/face_04.png" width=350; height=656;/><img id="face3" onclick="loadUnload(3)" src="images/face_05.png" width=350; height=656;/><img id="face4" onclick="loadUnload(4)" src="images/face_06.png" width=350; height=656;/><img id="face5" onclick="loadUnload(5)" src="images/face_07.png" width=350; height=656;/>
    </div>
    <div id="pop_face"><img id="popface_img" src=""/></div>
</div>

そして、ここに私のJavaScriptがあります:

    var id = "";
    var kindface=0;
    var fadeIn;
    var counterValue;
    var objHolder;


    function loadUnload(kindface){
        //FADEIN FADEOUT    
        function fader() {
            if(fadeIn == true){
                counterValue++;
                //setPoint = 9;
            }else{
                counterValue--;  // update parameters
                //console.log("hit");
            }
            objHolder.style.opacity = "0."+counterValue // show frame
            if (counterValue == setPoint){  // check finish condition
                clearInterval(id);
                console.log("end fader");
            }
        }

        //FADEOUT

アップデート

この 3 番目のステップを追加したばかりですが、これをどのように実装しますか? secondStep がフェーダー機能を終了した後に、この 3 番目のステップを実行しますか?

function thirdstep() {
        console.log("begin second step: ")

            fadeIn = true;
            counterValue = 0;
            setPoint = 9;
            objHolder = document.getElementById("popface_img");
            objHolder.src = "images/"+ kindface +".png";

            id = setInterval(fader, 100); // draw every 100ms
            console.log("end second step: ")
        }

        function secondStep() {
            console.log("begin second step: ")

            fadeIn = true;
            counterValue = 0;
            setPoint = 9;
            objHolder = document.getElementById("popface_img");
            objHolder.src = "images/"+ kindface +".png";

            id = setInterval(fader, 100); // draw every 100ms
            console.log("end second step: ")
        }

        function firstStep(callback) {
            console.log("begin first step: ")

            fadeIn = false;
            objHolder = document.getElementById("faces_holder");
            counterValue = 10;
            setPoint = 0;


            id = setInterval(callback, 100); // draw every 100ms
            console.log("end first step: ")
            secondStep();

        }


        //RUN FIRST STEP FUNCTION 
        console.log("BEGIN process ")             
            firstStep(fader);

        console.log("END OF ALL process ")

    }

</script>
4

1 に答える 1

2

あなたのコードでは：

> id = setInterval(callback, 100); // draw every 100ms
> console.log("end first step: ")
> secondStep();

secondStepはすぐに呼び出され、によって確立されたシーケンスが終了するのを待ちませんsetInterval。フェーダーからsecondStepを呼び出す必要があります。例：

function loadUnload(kindface){

    [...]
    function fader() {

        if (counterValue == setPoint){  // check finish condition
            clearInterval(id);
            console.log("end fader");

            // now call secondStep
            secondStep();
        }
    }
    [...]
}
于 2012-08-07T01:17:31.690 に答える