मैं div की पृष्ठभूमि की अस्पष्टता को कैसे एनिमेट कर सकता हूं?

Question

मेरे पास 0 अस्पष्टता पृष्ठभूमि वाला div #test है, मैं 0.7 की अस्पष्टता तक पहुंचने तक इसे एनिमेट करना चाहता हूं। लेकिन .animate css rgba के साथ काम नहीं कर रहा है।

मेरे सीएसएस है:

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

मेरी एचटीएमएल:

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

और मेरे jQuery:

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

यहाँ

एक jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/

धन्यवाद मदद करने के लिए एक बहुत !

Answer 1

सबसे पहले आप संपत्ति को सही ढंग से

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

तो आप jQuery ui को रंग चेतन करने के लिए शामिल करने की ज़रूरत सेट करना होगा।

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

तुम भी सीएसएस संक्रमण का उपयोग पृष्ठभूमि रंग

#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

जब समारोह चेतन के बजाय का उपयोग नहीं करते पृष्ठभूमि रंग लेकिन पृष्ठभूमि रंग का उपयोग कर चेतन कर सकते हैं। तो यहां कामकाजी कोड है:

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