Jak mogę animować krycie tła elementu div?

Question

Mam div #test z tłem nieprzezroczystości 0, chcę animować go, dopóki nie osiągnie nieprzezroczystości 0,7. Ale .animate nie działa z css rgba.

Moje CSS:

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

mój html:

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

i mój jQuery:

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

tu jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/

dziękuję za pomoc !

Answer 1

Przede wszystkim trzeba ustawić właściwość poprawnie

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

to trzeba to jquery-ui do animowania kolory.

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

Można również użyć przejścia css animować kolory tła

#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

Podczas używania funkcji animowania nie stosować background-color ale backgroundColor zamiast. Oto kod działający:

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