Comment puis-je animer l'opacité de l'arrière-plan d'un div?

J'ai un div #test avec un 0 opacité arrière-plan, je veux l'animer jusqu'à atteindre l'opacité de 0.7. Mais .animer ne semble pas fonctionner avec le css rgba.

Mon css est:

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

mon code html:

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

et mon jQuery:

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

Ici un jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/

merci beaucoup pour aider!

OriginalL'auteur Gradislava Bikkulova | 2013-04-27

  1. 12

    Tout d'abord, vous devez définir la propriété correctement

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

    ensuite, vous devez inclure jquery ui pour animer des couleurs.

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

    Vous pouvez également utiliser les transitions css pour animer des couleurs d'arrière-plan

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

    OriginalL'auteur Musa

  2. 1

    Lors de l'utilisation de fonction animate de ne pas utiliser la couleur d'arrière-plan, mais backgroundColor à la place. Voici donc le code de travail :

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

    OriginalL'auteur Ahmad