My standard opacity animation is not working in reverse order. Here is a link to the JSFiddle example. According to the documentation, it should work automatically. Since I am new to JavaScript, I am unsure if this issue lies in my code or if the CSS animation is incorrect.
Here is the HTML:
<div id="bg_layer" class="bg_layer"></div>
<div id="clicker" class="grey"></div>
<div id="galery" class="galery" ></div>
JavaScript:
clicker.onclick = function() {
document.getElementById("bg_layer").style.opacity = "0.7";
bg_layer.style.visibility = 'visible';
galery.style.visibility = 'visible';
document.getElementById("galery").style.opacity = "1";};
bg_layer.onclick = function() {
document.getElementById("bg_layer").style.opacity = "0";
bg_layer.style.visibility = 'hidden';
galery.style.visibility = 'hidden';
document.getElementById("galery").style.opacity = "0";
}
CSS:
html{
min-height:100%;
position:relative;}
body {background-image: url(img/wall.jpg);
background-repeat: repeat;
margin: 0 0 0 0;
height: 100%;
}
.grey {
float: right;
background: #d6d6d6;
width:300px;
height:300px;
margin: 20px 0 20px 0;
}
.bg_layer {
position: absolute;
visibility: hidden;
width: 100%;
height: auto;
min-height: 100%;
z-index: 98;
opacity: 0;
background: #000000;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.galery {
visibility: hidden;
position: absolute;
top: 100px;
margin: auto;
width: 170px;
height: 70px;
background: #ff0000;
opacity: 0;
z-index: 99;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}