使用 jQuery 设置 DIV 及其内容的透明度

Posted 2023-05-08

【中文标题】使用 jQuery 设置 DIV 及其内容的透明度

【英文标题】：Set transparency of a DIV and its contents using jQuery

【发布时间】：2010-11-21 12:17:03

【问题描述】：

使用 jQuery 设置 html DIV 元素及其内容的透明度的最佳方法是什么？

【问题讨论】：

透明度与不透明度相同。答案在这里：***.com/a/19602620/445131

【参考方案1】：

$('#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 );

希望这会有所帮助。干杯。

【参考方案2】：

另一个选项 - 保存您的键盘并使用 fadeTo:

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

【参考方案3】：

正如 theIV 所说，您可以使用 css 方法，但作为替代方案，您可以使用 animate：

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

这将在 100 毫秒内将您的 div（及其内容）的不透明度设置为 0.5（从它开始的任何内容）。

【参考方案4】：

试试这个属性

$('#my_div').css("opacity", "0.5"); //立即设置不透明度 $('#my_div').fadeTo(0, 0.5); //在 0 毫秒内将不透明度设置为 50%。如果要对其进行动画处理，请增加 0。 $('#my_div').fadeIn(); //将不透明度从 0 设置为 100%