Help us understand the problem. What is going on with this article?

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');
});

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

unkomorasi01
プログラマー(薄給)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away