To fade out backgronud color only

I have a div with background red. When a user open the page, I want it to fade out the background color. Div contents should rema开发者_如何转开发ins visible.

I used:

 $(".notificationExtraDetailsBlockColored").animate(5000, "slow", function () {
      $(this).fadeIn("slow");
      $(this).css("background-color", "#FFF");
 });

But it seems to only change the background color, not acting like a fade out effect.

You're going to be looking at animating the background color using rgba. Unfortunately, animating colors with jQuery means loading one not-so-small plugin, an extension of the original jQuery color plugin, so if don't need something too flexible, you can always use setInterval to animate the element in question:

// rgb(255, 255, 255) = white
var color = [255, 255, 255].join(',') + ',',
    transparency = 1,
    element = this,
    timeout = setInterval(function(){
        if(transparency >= 0){
            element.style.backgroundColor = 'rgba(' + color + (transparency -= 0.015) + ')';
            // (1 / 0.015) / 25 = 2.66 seconds to complete animation
        } else {
            clearInterval(timeout);
        }
    }, 40); // 1000/40 = 25 fps

Of course if you need anything complex you can always use the plugin I mentioned above. Rgba is only supported in IE9+ and all other modern browser, so you might want to look at providing alternatives to users with IE8 and below.

See this code working here: http://jsfiddle.net/DCFem/2/