JQuery在延迟之后添加一个类，然后再延迟一个类，再添加另一个类

How do I add a class after a delay then delay and a another class?

如何在延迟之后添加一个类，然后再延迟另一个类?

I can only seem to add one.

我只能加上一个。

$(document).ready(function() {
    $(".websites-container").delay(5000).queue(function() {
            $(this).addClass("active");
    });

    $(".websites-container").delay(8000).queue(function() {
            $(this).addClass("gone")
    });
});

2 个解决方案

#1

You need to call .dequeue() in the .queue() callback, otherwise the following items in the queue never get executed.

您需要在.queue()回调中调用.dequeue()，否则不会执行队列中的以下项。

$(document).ready(function() {
    $(".websites-container").delay(1000).queue(function() {
            // I'm impatient. I shortened the times.
            $(this).addClass("active").dequeue();
    }).delay(2000).queue(function() {
            $(this).addClass("gone");
    });
});

.active {font-weight: bold}
.gone {color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="websites-container">abc</div>

(This was almost solved by @adeneo, with the exception of placing dequeue in the callback.)

(除了在回调中放置dequeue之外，@adeneo几乎解决了这个问题。)

#2

Most likely the issue you're having is that you're using jQuery's delay feature incorrectly. Take a look at this SO question for reference: .delay() and .setTimeout()

您可能遇到的问题是使用jQuery的延迟特性不正确。看看这个SO问题，作为参考:.delay()和.setTimeout()

Since we're not working with an animation or within an already existing jQuery queue you should be using setTimeout in most cases:

由于我们不使用动画或现有jQuery队列，所以在大多数情况下应该使用setTimeout:

$(document).ready(function() {
    window.setTimeout(function() {
        $(".websites-container").addClass("active");
    }, 5000);

    window.setTimeout(function() {
        $(".websites-container").addClass("gone");
    }, 8000);
});

#1