Jquery alterar cor de fundo

Eu estava tentando o jquery com este exemplo:

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

Eu esperava o seguinte:

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

Mas foi o que realmente aconteceu:

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

Por que é que?

A .css()função não está na fila por trás das animações em execução, é instantânea.

Para corresponder ao comportamento que você procura, faça o seguinte:

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

A .queue()função aguarda a execução das animações e, em seguida, dispara o que estiver na função fornecida.

Assim é como deve 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);
      });
  });
});

Demonstração: http://jsfiddle.net/p7w9W/2/

Explicação:

Você precisa aguardar o retorno de chamada nas funções de animação antes de mudar a cor de fundo. Você também não deve usar apenas ID numérico: s, e se tiver um ID seu <p>lá, não deverá incluir uma classe no seu seletor.

Também aprimorei seu código (armazenamento em cache do objeto jQuery, encadeamento etc.)

Atualização: Como sugerido por VKolev, a cor agora muda quando o item está oculto.

tente colocar um atraso na última cor desbotada.

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

Quais são os valores válidos para o atributo id em HTML?
Os IDs não podem começar com dígitos !!!