[解決済み] 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() 関数は、実行中のアニメーションが終了するのを待ち、提供された関数にあるものを実行します。