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/

説明：

背景色を切り替える前に、アニメーション関数のコールバックを待つ必要があります。また、数値ID：sのみを使用しないでください。IDが<p>ある場合は、セレクターにクラスを含めないでください。

コードも拡張しました（jQueryオブジェクトのキャッシング、チェーンなど）。

更新：VKolev によって提案されているように、アイテムが非表示になっているときに色が変更されます。

最後のカラーフェードに遅延を設定してみてください。

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

HTMLのid属性の有効な値は何ですか？
IDは数字で始めることはできません!!!