Question

我需要为div的{{1}}设置动画并设置background-color，同时保持opacity:0内的文字可见。

CSS：

div

JS：

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

HTML：

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

问题是我只需要透明的背景和文本保持可见。就像你在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>

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

3 个答案: