When a user click on any of the images all images (images_holder) slowly fade out. Then after its gone, another image fade in, then after 3 seconds that images fades out. After that its gone the images_holder fade-in again. The problem of mine is that before the fader is complete, the secondStep function is already running.
What I want is finish first first step with fader function complete then after that second step will run. Been trying to create this callback but no luck.
Here is my 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>
And here is my 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
I just added this third step, how am I going to implement this? I want this third step run after secondStep finish the fader function?
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>
In your code:
> id = setInterval(callback, 100); // draw every 100ms
> console.log("end first step: ")
> secondStep();
secondStep is called immediately, it doesn't wait for the sequence established by setInterval
to finish. You need to call secondStep from fader , eg
function loadUnload(kindface){
[...]
function fader() {
if (counterValue == setPoint){ // check finish condition
clearInterval(id);
console.log("end fader");
// now call secondStep
secondStep();
}
}
[...]
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.