Хотите знать о механике.delay() в этом примере, jQuery

Question

Может ли кто-нибудь объяснить мне, почему здесь .delay(3000) правильное значение для 1-секундной синхронизации .fadeOut() но не добавка: .delay(3000).delay(4000).delay(5000)?

Часть, о которой идет речь:

$(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

Так как .delay() является аддитивным. Он просто добавляет 3-секундную задержку в конец текущей очереди эффектов для каждого элемента. Даже если вы используете одинаковую задержку для всех элементов до появления, она помещается в другую очередь эффектов. Вот время для каждого элемента:

• #drz = 1 секунда + 3 секунды задержки + 1 секунда = 5 секунд

• #a = 1 секунда задержки + 1 секунда на выходе + 3 секунды задержки + 1 секунда на входе = 6 секунд

• #b = 2 секунды задержки + 1 секунда на выходе + 3 секунды задержки + 1 секунда на входе = 7 секунд