Menu
I want to "show" the hidden div after 2-3 sec delay. Is it possible in the same javascript? Help me please.......
I've used the following code:
function ShowSecond() {
var div2 = document.getElementById("div2");
div2.className = "show";
setTimeout(function () {
div2.className = 'hide';
}, 2000);
}.show {
-o-transition: opacity 3s;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
transition: opacity 3s;
opacity:1;
}
.hide {
opacity:0;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="div1" class="show">First Div
<button onclick="ShowSecond()">clickMe</button>
</div>
<div id="div2" class="hide">Hidden Div</div>
</body>
</html>I want to "show" the hidden div after 2-3 sec delay
923
If you want a transition you will have to use some kind of css transition_(or alot of javascript calls, if your browser doesn't support css-transitions)_.
Here a mini example, how to perform the transition with only javascript
Speed and duration for this typ of transition has to be done the the interval(here 250 ms) and the opacity step-size (here 0.1)
(With this settings the duration for showing the div is about 2.5 seconds, since 250ms * 10 = 2.5s
function startShowing(){
var elementToHide = document.getElementById("show");
elementToHide.style.opacity = 0;
var intervalId = setInterval(function(){
if(elementToHide.style.opacity >= 1)
{
clearInterval(intervalId);
}else{
elementToHide.style.opacity = parseFloat(elementToHide.style.opacity) + 0.1;
}
},250);
}
//startShowing();.hide{
opacity:0;
}<div class="hide" id="show"> show me </div>
<button onclick="startShowing()"> SHOW </button>If you mean something else please specify your problem in more detail.
OLD Answer, probably not the intended solution
Just add a plus-sign and a space when setting the hide css class to the div
With other words change this div2.className = 'hide'; to this div2.className += ' hide'; . Like this both classes are set on the div but the opacity value is overriden by the last added class
function ShowSecond() {
var div2 = document.getElementById("div2");
div2.className = "show";
setTimeout(function () {
div2.className += ' hide';
}, 2000);
}.show {
-o-transition: opacity 3s;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
transition: opacity 3s;
opacity:1;
}
.hide {
opacity:0;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="div1" class="show">First Div
<button onclick="ShowSecond()">clickMe</button>
</div>
<div id="div2" class="hide">Hidden Div</div>
</body>
</html>Like this the transition of the show is still valid and only the opacity is overriden.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
