如何在不影响div内文本的情况下为div背景颜色设置动画？

Question

我需要为div的background-color设置动画并设置opacity:0同时还要使div内的文本可见。

CSS：

<style type="text/css">
    #block {
        background-color:#FF7F7F;
        display:none;
        padding:2px;
    }
</style>

JS：

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#animate').click(function() {
            $('#block').show('slow');
            $('#block').animate({
                opacity: 0.00
            });         
        });
    });
</script>

HTML：

<div id="block">
    <p id="text">
        hello there
    </p>
</div>
<a href="#" id="animate">Animate</a>

问题是我只需要透明的背景和保持可见的文本即可。 就像您在Facebook中检查帖子时一样，背景颜色的动画效果是透明的，并且文本仍对读者可见。

Answer 1

您需要使用rgba或hsla更改背景颜色，而不是不透明度。 旧版IE均不支持。

取而代之的是，您可以将div绝对定位在文本后面，然后为其设置动画性，使文本位于顶部具有透明背景的其他div中。

Answer 2

我建议在文本div下放置单独的“背景div”。 使用相对定位来做到这一点。 那么您就可以自由设置背景div的动画效果，并保持文本完整

Answer 3

看看这个http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

<div id="wrapper">
<div id="block">
</div>
<p id="text">
hello there
</p>
</div>
<a href="#" id="animate">Animate</a>