Javascript delay（）函数不能与jquery中的addClass（）函数一起使用

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

我的代码如下

CSS:

JQuery：

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

Use，as

。delay（）

设计用于处理队列as

addClass（）

不使用队列

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

或者，您可以使用

---

方法1

setTimeout（）

方法2

.queue

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

.delay（）

仅适用于在同一DOM对象上使用动画队列的jQuery方法。因此，由于

.addClass（）

不使用动画队列，因此它不与

.delay（）

协作

您可以通过排队函数触发

addClass（）

，也可以只使用

setTimeout（）

最简单的方法可能是：

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

这些方法在队列系统的帮助下工作，因此它将延迟下一个队列中下一个方法的执行（默认队列是

fx

queue）。

addClass

方法不使用队列执行，这就是它不工作的原因

您可以添加一个函数，该函数使用如下方法将类添加到队列的目标元素中

$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（'.but'）。淡出（300）；
$（'.circle1'）。延迟（1000）。队列（函数（）{
$（'.circle1'）.addClass（“缩放”）；
});
});
});
.zoom{
颜色：红色
}

但是
div
提供html代码或创建小提琴pls@Rocky，很高兴我能帮上忙很高兴它帮了忙，请投赞成票，并把它记为正确答案。：）
$(".but").click(function() {
         $('.but').fadeOut(300);
         setTimeout(function(){$('.circle1').addClass("zoom")},1000);
    });

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

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