使用jQuery設置DIV及其內容的透明度

Question

使用jQuery設置HTML DIV元素及其內容的透明度的最佳方法是什麼？

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

希望這會有所幫助。乾杯。

Answer 2

正如theIV所述可以使用的CSS方法，但作爲替代可以使用動畫：

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

這將你的div（和其內容）的不透明度動畫至0.5（從不管是什麼以100毫秒爲開始）。

Answer 3

另一種選擇 - 保存你的鍵盤和使用fadeTo：

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

Answer 4

試試這個特性

$('#my_div').css("opacity", "0.5"); //立即將混濁 $('#my_div').fadeTo(0, 0.5); //在0毫秒的過程中以動畫的不透明度爲50％ 。如果要爲其設置動畫，請增加0。 $('#my_div').fadeIn(); //將不透明度從0移動到100％