display transition (multiple transition) [duplicate] - css

Question

This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 4 years ago.
I have following code:
HTML:
<div id="container">
text text text
</div>
<img id="img1" src="img1.png" />
<img id="img2" src="img2.png" />
CSS:
#container {
display: block;
margin-top: 0vh;
transition: margin-top 1s ease-in 0.1s, display 0.1s linear 5s ;
}
JS:
$("img#img1").on('click', function () {
$("#container").css('margin-top', '50vh');
$("#container").css('display', 'none');
});
$("img#img2").on('click', function () {
$("#container").css('margin-top', '0vh');
$("#container").css('display', 'block');
});
Looking on CSS file, my intention is:
margin-top property, change after 0.1 second, for 1 second
display property, change after 5 second, for 0.1s
But it doesn't work. The display property is changed immediately after click on image.
How to fix it?

Answer 1

To add a delay in JavaScript, you can use the setTimeout function.
To add a five-second delay in your code, you would do the following:
$("img#img1").on('click', function () {
$("#container").css('margin-top', '50vh');
setTimeout(function() {
$("#container").css('display', 'none');
}, 5000);
});
$("img#img2").on('click', function () {
$("#container").css('margin-top', '0vh');
setTimeout(function() {
$("#container").css('display', 'block');
}, 5000);
});
The 5000 in this code is 5 seconds represented in millseconds. Hopefully the rest is self-explanatory - a function is specified which is executed after the set length of time.
Not quite sure what you mean about changing display for 0.1s though. An element is either displayed or it isn't - there is no in-between. If want something to fade, change its opacity instead. You probably ought to remove ", display 0.1s linear 5s" from your CSS too.