web-dev-qa-db-ja.com

jQueryを使用してDIVとそのコンテンツの透明度を設定する

JQueryを使用してHTMLDIV要素とそのコンテンツの透明度を設定するための最良の方法は何ですか？

jquerytransparencyeffects
18
Keith Adler

$('#my_element').css({ 'opacity' : 0.7 });

含まれている各要素にも実際に不透明度を設定しますか、それとも子要素が同じ不透明度を持っているかのように「表示」するだけですか？

私の質問の例として、要素と各子要素を設定するものが必要な場合は、次のようにすることができます

html

<div id="my_element">
  <div>
    lorem
  </div>
  <div>
    ipsum
  </div>
</div>

jquery

$('#my_element').children().
                 css({ 'opacity' : 0.25 }).
                 end().
                 css({ 'opacity' : 0.25 });

お役に立てれば。乾杯。

30
theIV

別のオプション-キーボードを保存して使用する fadeTo ：

$('#someDiv').fadeTo("slow",0.5);
10
redsquare

このプロパティを試してください

$('#my_div').css("opacity", "0.5"); //不透明度をすぐに設定します$('#my_div').fadeTo(0, 0.5); // 0ミリ秒の間に不透明度を50％にアニメーション化します。アニメーション化する場合は、0を増やします。 $('#my_div').fadeIn(); //不透明度を0から100％までアニメーション化します

1
subindas pm

TheIVが言ったように、cssメソッドを使用できますが、代わりにanimateを使用できます。

$('#my_element').animate({ opacity: 0.5 }, 100);

これにより、div（およびその内容）の不透明度が100ミリ秒で0.5（最初から）にアニメーション化されます。

1
Darko Z