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. Посмотрите на это так, вопрос для справки: .delay() and .setTimeout()

Поскольку мы не работаем с анимацией или в уже существующий JQuery очередь вы должны использовать setTimeout в большинстве случаев:

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

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