Wondering about the mechanics of .delay() in this example, jQuery

Question

Could someone explain to me why here the .delay(3000) is the 'right' value for nicely 1 second synced .fadeOut() but not additive: .delay(3000) .delay(4000) .delay(5000)?

The 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>

Answer 1

Because .delay() is additive. It simply adds a 3-second delay to the end of the current effects queue for each element. Even though you are using the same delay for all the elements prior to the fade in, it is being pushed onto a different effects queue. Here's the timing for each element:

• #drz = 1 second out + 3 second delay + 1 second in = 5 seconds

• #a = 1 second delay + 1 second out + 3 second delay + 1 second in = 6 seconds

• #b = 2 second delay + 1 second out + 3 second delay + 1 second in = 7 seconds