Reputation:
How to show the image for a few seconds and then hide it and show the rest HTML section.
Initially, I want to display the image for 2 seconds and hide the DIV till the time. After 2 seconds hide the image and display the div only.
What I tried using js
setTimeout(() => document.getElementById('Image').style.display = 'block', 2000);
setInterval(() => document.getElementById('Item').style.display = 'none', 2000);
<div id="Image">
<img src="../img-correct.png" alt="image">
</div>
<div class="item" id="Item">
<h3>Time:</h3>
</div>
I am getting the div first then after 2 seconds I am getting an image.
Upvotes: 1
Views: 2173
Reputation: 11
Set image display to: 'block' and item display to: 'none' then change both after 2000ms.
const item = document.getElementById('Item');
item.style.display = 'none';
const image = document.getElementById('Image');
image.style.display = 'block';
setTimeout(() => {
item.style.display = 'block';
image.style.display = 'none';
}
,2000);
Upvotes: 1
Reputation: 206348
Using Promise and Element.classList's toggle():
const wait = ms => new Promise(fn => setTimeout(fn, ms));
const toggle_content = () => {
document.querySelector('#Image').classList.toggle("u-none");
document.querySelector('#Item').classList.toggle("u-none");
};
wait(2000).then(toggle_content);
/* Utility Classes */
.u-none {
display: none;
}
<div id="Image"><img src="//placehold.it/100x100/0bf" alt="image"></div>
<div id="Item" class="u-none"><h3>HELLO</h3></div>
The best part of the above is that by setting initially an element class as u-none
JS will not cause flicks of content.
Upvotes: 1
Reputation: 66
<div id="image">
<img src="../img-correct.png" alt="image">
</div>
<div class="item" id="item">
</div>
// setTimeout allows us to run a function once after the interval of time.
// setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.
// displayed and removed after 2seconds
setTimeout(() => document.getElementById('image').style.display = 'none', 2000);
// Waiting 2 seconds to add text to your div with id of "item" (happening once => setTimeout)
setTimeout(() => document.getElementById('item').innerHTML = "time:", 2000);
Codepen => https://codepen.io/zibobilo/pen/WNxvqPL
Upvotes: 0
Reputation: 10204
On loading
, you need to show image
and hide the item
. And on setTimeout
callback, hide the image
and show the item
as follows.
FYI, setTimeout
callback is only called one time after the timeout
but setInterval
callback is called periodically based on the time
mentioned on second param.
document.getElementById('Image').style.display = 'block';
document.getElementById('Item').style.display = 'none';
setTimeout(() => {
document.getElementById('Image').style.display = 'none';
document.getElementById('Item').style.display = 'block';
}, 2000);
<div id="Image">
<img src="../img-correct.png" alt="image">
</div>
<div class="item" id="Item">
<h3>Time:</h3>
</div>
Upvotes: 1
Reputation: 3043
You can handle a variable as the boolean state of what component will be displayed right now. Then in setInterval
, using the variable, display the element you want each call. Like this:
var imageShow=true;
document.getElementById('Item').style.display = 'none';
document.getElementById('Image').style.display = 'block';
setInterval(() => {
document.getElementById('Image').style.display = imageShow?'none':'block';
document.getElementById('Item').style.display = imageShow?'block':'none';
imageShow=!imageShow;
}, 2000);
<div id="Image">
<img src="../img-correct.png" alt="image">
</div>
<div class="item" id="Item">
<h3>Time:</h3>
</div>
Upvotes: 0