如何在不影响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

我会建议在文本div下放置单独的“背景div”。使用相对定位来做到这一点。然后你把所有的自由动画背景的DIV，你想保持完整文本

Answer 2

而不是不透明，您需要使用rgba或hsla更改背景颜色。在旧的IE中都不支持。

相反，您可以绝对在文本后面放置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>