Check out the fiddle I've created:
http://jsfiddle.net/dkarasinski/dj2nqy9c/1/
This is the basic code.
I need assistance with a functionality where clicking on a black box opens a black background and then after 500ms a red box appears. I want the red box to close simultaneously with the black background when clicked again, without the delay. How can I achieve this?
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test one">
<div class="testthree"></div>
</div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
CSS:
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: fixed;
top: 50%;
left: 50%;
z-index:100;
width: 0;
height: 0;
-webkit-transition-duration: 300ms;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif;
}
.test.open {
top: 0;
left: 0;
width: 100%;
height: 100%;
position:fixed;
color:black;
background-color: rgba(0, 0, 0, 0.8);
}
.testthree {
width:0;
height:0;
background-color: red;
margin:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.testthree.fart {
width:50%;
height:300px;
}
.testthree.close {
display:none;
}
.workName {
text-align:center;
margin-top:17px;
}
JS:
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
if ($(this).find(".test").hasClass("one")) {
setTimeout(function(){
$( ".testthree" ).toggleClass( "fart" );
}, 500);
}
});
});