title: How can I animate the opacity of the background of a div?
body: <p>I have a div #test with a 0 opacity background, I want to animate it until reach the opacity of 0.7. But .animate doesn't seem to work with the css rgba.</p>
  
  <p>My css is:</p>
  
  <pre><code>#test {
      background-color: rgba(0, 0, 0, 0);
  }
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;div id="test"&gt;
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;img src="http://davidrhysthomas.co.uk/img/dexter.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my jQuery:</p>
  
  <pre><code>$('#test').animate({ background-color: rgba(0, 0, 0, 0.7) },1000);
  </code></pre>
  
  <p>Here a jsFiddle: <a href="http://jsfiddle.net/malamine_kebe/7twXW/10/" rel="noreferrer">http://jsfiddle.net/malamine_kebe/7twXW/10/</a></p>
  
  <p>thanks a lot for helping!</p>