How to add opacity to a div?

I am trying to add opacit开发者_Python百科y to a div.

Here is my Jquery:

$('.redDiv').fadeIn(0, 0.5);

My HTML:

<div class="redDiv" style="background:red;width:20px;height:20px;"> </div>
<div class="divBlue;" style="background:blue;width:20px;height:20px;"> </div>
<div class="divBlack;" style="background:black;width:20px;height:20px;"> </div>

There are a few different ways to do this:

$('.redDiv').css("opacity", "0.5"); //Immediately sets opacity
$('.redDiv').fadeTo(0, 0.5);        //Animates the opacity to 50% over the course of 0 milliseconds.  Increase the 0 if you want to animate it.
$('.redDiv').fadeIn();              //Animates the opacity from 0 to 100%

If an element has display:none fadeTo and fadeIn will both make the element visible before fading it

Something like this ought to help:

$("div").css("opacity", ".7");

The fadeIn method that you're calling doesn't just apply opacity to an element, but does so from a starting point (transparent) to an endpoint (opaque), essentially animating the element with the transition.

Use fadeTo method

$('.redDiv').fadeTo(0, 0.5); 

try this-

$('.redDiv').css("opacity", "0.5");