Wie kann ich die Deckkraft des Hintergrunds eines div animieren?

Question

Ich habe einen div # -Test mit einem 0-Deckkraft-Hintergrund, ich möchte es animieren, bis die Deckkraft von 0,7 erreicht. Aber .animate scheint nicht mit der css rgba zu arbeiten.

Meine CSS ist:

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

mein html:

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

und meine jQuery:

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

Hier ein jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/

vielen Dank für die Hilfe !

Answer 1

Zunächst einmal müssen Sie die Eigenschaft korrekten

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

dann müssen gesetzt jquery-ui zu animieren Farben aufzunehmen.

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

Sie können auch CSS-Übergänge verwenden, um Hintergrundfarben

#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

zu animieren Wenn Funktion animieren nicht Hintergrund-Farbe, sondern background stattdessen verwenden. Also hier ist der Arbeitscode:

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