JQuery add class after delay and then delay another class

Question

How to add a class after a delay, then delay another class?

I can only add it.

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

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

Answer 1

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

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

Run codeHide result

(This was almost resolved by @adeneo , with the exception of being placed in the dequeue callback.)

Answer 2

Most likely the problem is that you are using the jQuery delay function incorrectly. Take a look at this SO question for reference: .delay () and .setTimeout ()

jQuery, setTimeout :

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

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