Jquery cambia el color de fondo

Estaba probando jquery con este ejemplo:

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

Esperaba que sucediera lo siguiente:

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

Pero esto es lo que realmente sucedió:

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

¿Porqué es eso?

La .css()función no hace cola detrás de la ejecución de animaciones, es instantánea.

Para que coincida con el comportamiento que busca, debe hacer lo siguiente:

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

La .queue()función espera a que se ejecuten las animaciones y luego dispara lo que esté en la función suministrada.

Así es como debería ser:

Código:

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

Demostración: http://jsfiddle.net/p7w9W/2/

Explicación:

Debe esperar la devolución de llamada en las funciones de animación antes de cambiar el color de fondo. Tampoco debe usar solo ID numéricos: s, y si tiene una ID de <p>allí, no debe incluir una clase en su selector.

También mejoré su código (almacenamiento en caché del objeto jQuery, encadenamiento, etc.)

Actualización: según lo sugerido por VKolev, el color ahora cambia cuando el elemento está oculto.

intente retrasar el último desvanecimiento de color.

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

¿Cuáles son los valores válidos para el atributo id en HTML?
¡Las identificaciones no pueden comenzar con dígitos!