Jquery змінити колір тла

Я пробував jquery за допомогою цього прикладу:

 $(document).ready(function(){
      $("button").mouseover(function(){
        $("p#44.test").css("background-color","yellow");
        $("p#44.test").hide(1500);
        $("p#44.test").show(1500);
        $("p#44.test").css("background-color","red");
      });
    });

Я очікував, що трапиться таке:

1. Color of <p> to turn yellow
2. <p> to slowly fade
3. <p> to slowly show
4. Color of <p> to turn red

Але ось що насправді сталося:

1. <p> turned red
2. <p> slowly hid away
3. <p> slowly showed

Чому так?

.css()Функція не черга за управління анімацією, це миттєво.

Щоб відповідати поведінці, яку ви хочете, вам потрібно зробити наступне:

$(document).ready(function() {
  $("button").mouseover(function() {
    var p = $("p#44.test").css("background-color", "yellow");
    p.hide(1500).show(1500);
    p.queue(function() {
      p.css("background-color", "red");
    });
  });
});

У .queue()функції очікування для запуску анімації для запуску і потім пожежі Що б не в поставляється функції.

Ось як має бути:

Код:

$(function(){
  $("button").mouseover(function(){
    var $p = $("#P44");
    $p.stop()
      .css("background-color","yellow")
      .hide(1500, function() {
          $p.css("background-color","red")
            .show(1500);
      });
  });
});

Демо: http://jsfiddle.net/p7w9W/2/

Пояснення:

Вам потрібно дочекатися зворотного дзвінка на анімаційних функціях, перш ніж переключити колір тла. Ви також не повинні використовувати тільки числовий ідентифікатор: s, і якщо у вас є свій ідентифікатор<p> ви не повинні включати клас у свій вибір.

Я також покращив ваш код (кешування об’єкта jQuery, ланцюжок тощо)

Оновлення: За пропозицією В.Колева, колір тепер змінюється, коли елемент прихований.

спробуйте помістити затримку на останню забарвлення кольору.

$("p#44.test").delay(3000).css("background-color","red");

Які дійсні значення для атрибута id у HTML?
Ідентифікатор не може починатися з цифр !!!