Đặt độ trong suốt của DIV và nội dung của nó bằng cách sử dụng jQuery

Question

Cách tốt nhất để đặt độ trong suốt của phần tử DIV HTML và nội dung của nó bằng jQuery là gì?

Answer 1

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

Bạn có muốn thực sự thiết lập opacity cho mỗi yếu tố chứa là tốt, hoặc bạn chỉ muốn nó 'xuất hiện' như nếu các yếu tố con có opacity giống nhau không?

Như một ví dụ cho câu hỏi của tôi, nếu bạn muốn một cái gì đó mà bộ một phần tử, và mỗi người trong số các yếu tố trẻ em, bạn có thể làm một cái gì đó như thế này

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

Hy vọng điều này sẽ hữu ích. Chúc mừng.

Answer 2

Như theIV nói rằng bạn có thể sử dụng phương pháp css, nhưng như một sự thay thế, bạn có thể sử dụng Animate:

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

này sẽ animate opacity của bạn div (và nội dung của nó) đến 0,5 (từ bất cứ điều gì nó là để bắt đầu với) trong 100 mili giây.

Answer 3

Một lựa chọn khác - Tiết kiệm bàn phím của bạn và sử dụng fadeTo:

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

Answer 4

Hãy thử tính này

$('#my_div').css("opacity", "0.5"); // Ngay lập tức đặt opacity $('#my_div').fadeTo(0, 0.5); // Họat ảnh opacity đến 50% trong suốt quá trình từ 0 mili giây . Tăng 0 nếu bạn muốn tạo hiệu ứng động. $('#my_div').fadeIn(); // Hoạt ảnh độ mờ từ 0 đến 100%