What is the reason behind using .delay(3000)
as the optimal value to achieve a well-synced 1-second effect with .fadeOut()
, rather than adding delays like this: .delay(3000)
.delay(4000)
.delay(5000)
?
The specific part in question:
$(document).ready(function(){
$('#b').click(function(){
$('#drz').fadeOut(1000);
$('#a').delay(1000).fadeOut(1000);
$('#b').delay(2000).fadeOut(1000);
/*this below*/
$('#drz').delay(3000).fadeIn(1000);
$('#a').delay(3000).fadeIn(1000);
$('#b').delay(3000).fadeIn(1000);
});
});
`
$(document).ready(function(){
$('#b').click(function(){
$('#drz').fadeOut(1000);
$('#a').delay(1000).fadeOut(1000);
$('#b').delay(2000).fadeOut(1000);
/*this below*/
$('#drz').delay(3000).fadeIn(1000);
$('#a').delay(3000).fadeIn(1000);
$('#b').delay(3000).fadeIn(1000);
});
});
/* same as above
$(document).ready(function(){
$('#b').click(function(){
$('#drz').fadeOut(1000).delay(3000).fadeIn(1000);
$('#a').delay(1000).fadeOut(1000).delay(3000).fadeIn(1000);
$('#b').delay(2000).fadeOut(1000).delay(3000).fadeIn(1000);
});
});
*/
/* unsuccessful attempt
$(document).ready(function(){
$('#b').click(function(){
$('#drz').fadeOut(1000);
$('#a').delay(1000).fadeOut(1000);
$('#b').delay(2000).fadeOut(1000);
$('#drz').delay(3000).fadeIn(1000);
$('#a').delay(4000).fadeIn(1000);
$('#b').delay(5000).fadeIn(1000);
});
});
*/
.drztop {
position: relative;
display:block;
top: 10%;
left: 10%;
border-radius:51%;
background-color: none;
height: 405px;
width: 405px;
border:none;
}
.drz {
position: absolute;
display:block;
top: 0%;
left: 0%;
border-radius:51%;
background-color: yellow;
height: 400px;
width: 400px;
border: 1px solid;
z-index:-1;
}
.a {
position: absolute;
display:block;
top: 12%;
left: 12%;
border-radius:51%;
background-color: red;
height: 300px;
width: 300px;
border: 3px solid black;
z-index: 1;
}
.b {
position: absolute;
display:block;
top: 25%;
left: 25%;
border-radius:51%;
background-color: pink;
height: 200px;
width: 200px;
border: 3px solid black;
z-index:2;
cursor: pointer;
}
#ck {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
color: green;
position:absolute;
top: 30%;
left: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class='drztop' id='drztop'>
<div class='drz' id='drz'></div>
<div class='a' id='a'></div>
<div class='b' id='b'>
<p id='ck'>CLICK ME</p>
</div>
</div>