CODEWITHSUNDEEP
javascriptjqueryhtmlcsschaining
hmnhmn
hmnhmn

Reputation: 173

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

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>

Upvotes: 1

Views: 124

Answers (1)

quietmint
quietmint

Reputation: 14153

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

Upvotes: 2

Related Questions