Làm cách nào tôi có thể tạo hiệu ứng mờ đục của nền của div?

Question

Tôi có một div #test với nền mờ 0, tôi muốn tạo hiệu ứng động cho đến khi đạt đến độ mờ là 0,7. Nhưng .animate dường như không hoạt động với css rgba.

css của tôi là:

#test { 
    background-color: rgba(0, 0, 0, 0); 
} 

html của tôi:

<div id="test"> 
    <p>Some text</p> 
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" /> 
</div> 

và jQuery tôi:

$('#test').animate({ background-color: rgba(0, 0, 0, 0.7) },1000); 

Dưới đây là một jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/

thanks a lot giúp !

Answer 1

Trước hết bạn cần phải thiết lập thuộc tính một cách chính xác

$('#test').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000); 

thì bạn cần phải bao gồm jquery-ui animate màu sắc.

http://jsfiddle.net/7twXW/11/

Bạn cũng có thể sử dụng hiệu ứng chuyển tiếp css để animate màu nền

#test { 
    background-color: rgba(0, 0, 0, 0); 
    -webkit-transition:background-color 1s; 
    -moz-transition:background-color 1s; 
    transition:background-color 1s; 
} 

http://jsfiddle.net/7twXW/13/

Answer 2

Khi sử dụng động chức năng không sử dụng background-color nhưng backgroundColor để thay thế. Vì vậy, đây là mã hoạt động:

$('#test').animate({ backgroundColor: "rgba(0,0,0,0.7)" });