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(); 
       }); 

}); 

Answer 2

方法1setTimeout()

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

方法2.queue

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

Answer 3

.delay()只適用於在同一個DOM對象上使用動畫隊列的jQuery方法。因此，由於.addClass()未使用動畫隊列，因此不會與.delay()合作。

您可以通過排隊功能觸發addClass()，也可以使用setTimeout()。

最簡單的方法大概是這樣的：

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

Answer 4

的​​3210方法與隊列系統的幫助下工作的，因此它會延遲在未來的隊列中的下一個方法的執行（默認隊列是fx隊列）。方法addClass不利用隊列執行，這是它不起作用的原因。

您可以添加一個功能使用queue()方法類似

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

.zoom { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="but">but</button> 
 
<div class="circle1">div</div>