Question

有人可以向我解释为什么.delay(3000)在1秒内同步.fadeOut()是'正确'的值，但不是加法的：.delay(3000) .delay(4000) {{1} }？

有问题的部分：

.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%;
}

Answer 1

因为.delay() 是添加剂。它只是为每个元素的当前效果队列的末尾添加了3秒的延迟。即使您在淡入之前对所有元素使用相同的延迟，它也会被推送到不同的效果队列。这是每个元素的时间：

#drz = 1秒钟+ 3秒延迟+ 1秒= 5秒
#a = 1秒延迟+ 1秒退出+ 3秒延迟+ 1秒= 6秒
#b = 2秒延迟+ 1秒输出+ 3秒延迟+ 1秒输入= 7秒

想知道这个例子中的.delay（）的机制，jQuery

1 个答案: