javascript - delay() 函数不适用于 jquery 中的 addClass() 函数

Question

当我在 addClass() 函数之前使用 delay() 函数时，类 circle1 不会延迟一段时间。

我的代码如下……

CSS:

.but{display:block; width:40px; height:40px; background-color:#F00; position:absolute;}

.circle1{display:block; width:145px; height:145px; position:absolute; left:10px; bottom:0px; border-radius:50%; border:5px solid rgba(100%,0%,20%,0.7); background-image:url(New%20folder/1st.jpg); background-position:center; background-repeat:no-repeat; background-size:cover; transform:scale(0);}
.zoom{transform:scale(1); transition:All 0.4s ease;}

JQuery:

$(document).ready(function() {
    $(".but").click(function() {
         $('.but').fadeOut(300);
         $('.circle1').delay(1000);
         $('.circle1').addClass("zoom");
    });
});

Answer 1

使用setTimeout ，因为 .delay() 被设计为与队列一起工作，因为 addClass() 不要使用队列。

$(".but").click(function() {
     $('.but').fadeOut(300);
     setTimeout(function(){
         $('.circle1').addClass("zoom");
     }, 1000);        
});

或者，您可以使用 .queue

$(".but").click(function() {
     $('.but').fadeOut(300);    

     $('.circle1').delay(100)
               .queue(function() {
                   $(this).addClass("zoom");
                   $(this).dequeue();
               });

});