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

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