I am trying to add opacity 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>

I am trying to add opacity 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>

• javascript
• jquery

• Jquery how to add opacity to a div? – Rails beginner Commented Aug 16, 2011 at 10:16
• @Rails: You said that much already. Delan is asking you to ask a real, well-formed, detailed question, not just to repeat the question title which we can already plainly see. – Lightness Races in Orbit Commented Aug 16, 2011 at 11:10

4 Answers 4

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");