Show 4 images step by step with effect in javascript
Question
<!DOCTYPE html>
<html>
<head>
<style>
#steps img{
-webkit-transition: background-image 1.0s linear 0s;
transition: background-image 1.0s linear 0s;
float: left;
display: none;
height: 50px;
width: 50px;
}
</style>
<script>
var i = 0;
var elem;
function nextStep(){
i++;
var img = document.createElement("img");
img.src = "image"+i+".png"
img.width = "50px";
img.height = "50px";
img.id = "step" + i;
document.getElementById("steps").appendChild(img);
elem = document.getElementById(img.id);
elem.style.display = "inline-block";
elem.style.opacity = "0";
setTimeout(slide(),5000);
}
function slide(){
elem.style.opacity = "1";
if(i > 3){
clearTimeout(slide());
clearTimeout(nextStep());
}
setTimeout(nextStep(),5000);
}
</script>
</head>
<body>
<h1>Steps</h1>
<div id="steps">
<script>
nextStep();
</script>
</div>
<p id="text"></p>
</body>
</html>
I have 4 images and i want to create and display them step by step with a css3 effect, it start by executing nextStep() function that creates img child to div and change display and opacity. After that slide() is called, the opacity is set to 1 and we call nextStep() again. when i > 3 we stop displaying. When i test it, it displays the 4 images instantly without any effect
EDIT:
<!DOCTYPE html>
<html>
<head>
<style>
#steps img{
/*
-webkit-transition: background-image 1.0s linear 0s;
transition: background-image 1.0s linear 0s;
*/
float: left;
display: none;
height: 50px;
width: 50px;
}
</style>
<script>
var i = 0;
var elem;
//var slide;
//var nextStep;
function nextStep(){
i++;
var img = document.createElement("img");
img.src = "image"+i+".png"
img.width = "50px";
img.height = "50px";
img.id = "step" + i;
document.getElementById("steps").appendChild(img);
elem = document.getElementById(img.id);
elem.style.display = "inline-block";
//elem.style.opacity = "0";
setTimeout(slide(),2000);
}
function slide(){
//elem.style.opacity = "1";
if(i < 3){
//clearTimeout(slide());
//clearTimeout(nextStep());
setTimeout(nextStep(),2000);
}
}
</script>
</head>
<body>
<h1>Steps</h1>
<div id="steps">
<script>
document.onload = function (){
nextStep();
};
</script>
</div>
<p id="text"></p>
</body>
</html>
1 answers
solution1
0 2016-04-18 12:54:10
You should always wait for the DOM to be fully loaded before doing any operations on it. Use document.onload to execute your script when the document is loaded :
<script>
document.onload = function (){
nextSteps()
};
</script>
Edit : There is more issues with your code. The clearTimeout function is not needed here. Also, you're not using it right. Quote from the docs at w3schools :
The clearTimeout() method clears a timer set with the setTimeout() method.
The ID value returned by setTimeout() is used as the parameter for the clearTimeout() method.
Note: To be able to use the clearTimeout() method, you must use a global variable when creating the timeout method:
myVar = setTimeout("javascript function",milliseconds);Then, if the function has not already been executed, you will be able to stop the execution by calling the clearTimeout() method.
Your slide function should look like this :
function slide(){
elem.style.opacity = "1";
if(i < 3){
setTimeout(nextStep,5000);
}
}
Edit 2 :
setTimeout needs a reference to a function, eg the name of the function without the parenthesis :
setTimeout(nextStep,5000);
nextStep is a reference to a function
nextStep() is the result returned by the function after its execution (undefined in this case)
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.