jQuery在延迟之后添加一个类然后延迟和另一个类

Question

如何在延迟然后延迟和另一个类之后添加一个类？

我似乎只能添加一个。

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

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

Answer 1

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

$(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>

（这几乎是由@adeneo解决的，除了在回调中放入dequeue。）

Answer 2

你可能遇到的问题很可能就是你错误地使用了jQuery的延迟功能。看看这个SO问题以供参考：.delay() and .setTimeout()

由于我们不使用动画或在现有的jQuery队列中，您应该在大多数情况下使用setTimeout：

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

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