javascript - divの背景色をfadeIn/Outで変更するには?

Question

divの背景色をfadeIn/Outで変更する方法、背景画像ではなく背景色のみをフェードしたい、便利なコードまたは解決策を教えてください

Answer 1

最新のブラウザーでのみサポートされていますが、 CSS トランジションを使用して同じ効果を実現することも検討してください。

HTML

<div class='foobar'></div>

CSS

.foobar {
    /* transition properties */
    transition: background-color 2s;
    -moz-transition: background-color 2s;
    -webkit-transition: background-color 2s;
    -o-transition: background-color 2s;

    /* basic styling & initial background-color */
    background-color:maroon;
    width:100px;
    height:100px;
}

/* Change background color on mouse over */
.foobar:hover {
    background-color:blue;
}

ここでの実例、http://jsfiddle.net/eRW57/14/

Answer 2

jQuery の fadeIn/fadeOut を使用して、要素の背景 (色またはその他) だけをフェードすることはできません。

できることは、背景色を含む追加のレイヤー (DIV など) を配置し、その上でフェードイン/アウトすることです。

このようなものの代わりに：

<div id="my-background"></div>

次の構造を使用します。

<div id="container">
  <div id="my-background"></div>
</div>

CSS

#container
{
 position:relative;
 width:200px;
 height:100px;
 background-image:url(my-background-image.jpg);
}
#my-background
{
 height:100%;
 width:100%;
 background-color:blue;
 position:absolute;
 z-index:99;
}

次にjQueryのfadeIn/fadeOutメソッドを使用

JS

jQuery("#my-background").fadeOut();

Answer 3

<script>
$(document).ready(function(){
  $("p").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});
</script>

試してみてください..うまくいくはずです