10

背景の不透明度が 0 の div #test があり、不透明度が 0.7 になるまでアニメーション化したいと考えています。しかし、.animate は css rgba では動作しないようです。

私のcssは：

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

助けてくれてどうもありがとう！

4

2 に答える 2

15

まず、プロパティを正しく設定する必要があります

$('#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/

于 2013-04-27T17:27:39.117 に答える
1

animate 関数を使用する場合は、background-color ではなく backgroundColor を使用してください。だからここに作業コードがあります:

$('#test').animate({ backgroundColor: "rgba(0,0,0,0.7)" });
于 2014-08-29T14:58:19.573 に答える