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?
ID не может начинаться с цифр !!!