Как я могу анимировать непрозрачность фона div?

Question

У меня есть div #test с фоном 0 opacity, я хочу анимировать его до достижения непрозрачности 0.7. Но .animate, похоже, не работает с css rgba.

Мой КСС:

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

мой HTML:

<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/

Вы также можете использовать CSS переходы, чтобы оживить цвета фона

#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

При использовании анимации функции не использовать цвет фона, но BackgroundColor вместо этого. Так вот рабочий код:

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