jQueryのanimate()で透明度を付けて背景色だけを変える

背景色をふわぁーっと変えたい

animate()をつかう。

以下の例だと子要素まで透明にしてしまうので、文字も透明にしてしまう。
opacityってそういうやつなんだって。

$("#test").mouseover(function(){
  $(this).animate({ 
    backgroundColor: "#ffffff",
    opacity: 0.5
  }, 1000, 'linear');
});

文字を透明にせず、背景のみ半透明なものをアニメーションする

じゃあ、opacityを消して
#ffffff00 みたいな感じで透明度を付けようとしても反映されないンゴ。
そんな時は、rgb(0,0,225,0.5)的な感じにすると透明度が設定できるようになる。

$("#test").mouseover(function(){
  $(this).animate({ 
    backgroundColor: "rgb(0,0,225,0.5)"
    // opacity: 0.5 ← opacity は不要！
  }, 1000, 'linear');
});

そうすれば半透明の背景のみをアニメーションをつけて表示非表示できるようになる！文字も透明にならない！