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