JQuery zmienia kolor tła

Próbowałem jquery na tym przykładzie:

 $(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");
      });
    });

Spodziewałem się, co się stanie:

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

Ale tak się właśnie stało:

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

Dlaczego?

.css()Funkcja nie działa w kolejce za animacje, to chwilowe.

Aby dopasować zachowanie, którego szukasz, musisz wykonać następujące czynności:

$(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");
    });
  });
});

Te .queue()oczekiwania funkcyjne do uruchamiania animacji na wyczerpaniu, a następnie pożary cokolwiek w funkcji dostarczone.

To jest takie, jakie powinno być:

Kod:

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

Demo: http://jsfiddle.net/p7w9W/2/

Wyjaśnienie:

Musisz poczekać na wywołanie zwrotne funkcji animacji, zanim zmienisz kolor tła. Nie powinieneś także używać tylko numerycznych ID: s, a jeśli masz <p>tam swoje ID, nie powinieneś umieszczać klasy w swoim selektorze.

Ulepszyłem również Twój kod (cachowanie obiektu jQuery, łańcuchowanie itp.)

Aktualizacja: zgodnie z sugestią VKoleva kolor zmienia się teraz, gdy przedmiot jest ukryty.

spróbuj opóźnić ostatnie zanikanie koloru.

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

Jakie są prawidłowe wartości atrybutu id w HTML?
Identyfikatory nie mogą zaczynać się od cyfr !!!