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

Question

I need to animate a div 's background-color and set opacity:0 while also keeping text inside the div visible.

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>

The problem is that I just need the background transparent and the text to stay visible. Like when you check for post in Facebook, the background color is animating to be transparent and the text stays visible to readers.

Answer 1

Instead of opacity, you need to change the background colour using rgba or hsla. Neither are supported in old IEs.

Instead, you could absolutely position a div behind the text, then animate opacity of that, leaving the text in a different div on top with a transparent background.

Answer 2

I would suggest having separate "background div" positioned under the text div. use relative positioning to do that. then you have all the freedom to animate the background div as you wish keeping text intact

Answer 3

check this out 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>