Использование JQuery для изменения CSS атрибутов с задержкой

Question

Как я могу использовать JQuery изменить CSS атрибуты HTML элемента с задержкой.

Представьте себе этот сценарий. У меня есть div с bg color синий. Я хочу, чтобы он погас, и когда он исчезает, я хочу, чтобы bg color был красным.

Я пробовал это.

$("div").fadeOut().delay(500).css("background-color","red").fadeIn(); 

Хотя выведении DIV уже меняет цвет на красный, прежде чем она исчезает. Это не следует последовательности сцепленных событий. Как я могу сделать это в одной строке.

Answer 1

Вы можете иметь любую функцию участвовать в очереди анимации с помощью queue function:

$("div") 
    .fadeOut() 
    .delay(500) 
    .queue(function() { 
     $(this).css("background-color","red").dequeue(); 
    }) 
    .fadeIn(); 

Обратите внимание на dequeue вызов в функции обратного вызова, который является то, что говорит JQuery, чтобы продолжить следующую вещь в очереди ,

Answer 2

$("div").fadeOut(500, function() { 
    $("div").css("background-color","red").fadeIn() 
});