javascript - 我可以在 jQuery 中的“click”和“addClass”之间添加延迟吗？

Question

我可以在 addClass 方法之前添加延迟吗？

这似乎对我不起作用。

$("#btn").click(function doStuff(){
    $("#myoBj").show();
    $("#myoBj").animate({left: "15"});
    $(".secondObj").delay(1000).addClass('glow');
    $(".thirdObj").addClass('topGlow');
)};

谢谢

Answer 1

从文档中：

该.delay()方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——<code>.delay() 不能替代 JavaScript 的本机 setTimeout函数，这可能更适合某些用例。

因此.delay()不能替代 JavaScript 的setTimeout().

---

用这个：

$("#btn").click(function doStuff(){
    $("#myoBj").show();
    $("#myoBj").animate({left: "15"});
    setTimeout(function(){ $(".secondObj").addClass('glow'); }, 1000);
    $(".thirdObj").addClass('topGlow');
)};

Answer 2

是的，但不使用jQuerydelay函数，因为动作需要在动画队列（或“一个”动画队列，如果您定义一个）上才能工作；改用setTimeout：

setTimeout(function() { /* */ }, timeout);

Answer 3

$("#btn").click(function doStuff(){
    $("#myoBj").show();
    $("#myoBj").animate({left: "15"});

    setTimeout(function () {
        // Wait 1 second and add the class
        $(".secondObj").addClass('glow');
    }, 1000);

    $(".thirdObj").addClass('topGlow');
});

Answer 4

您可以使用queue()方法的回调在延迟完成后触发您的代码。

$("#btn").click(function doStuff(){
    $("#myoBj").show();
    $("#myoBj").animate({left: "15"});
    $(".secondObj").delay(1000).queue(function() {
          $(this).addClass('glow');
    });
    $(".thirdObj").addClass('topGlow');
)};