javascript - How to add opacity to a div? - Stack Overflow

admin管理员组

文章数量:1321061

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

Share Improve this question Follow edited Aug 16, 2011 at 11:10 Lightness Races in Orbit 385k7777 gold badges666666 silver badges1.1k1.1k bronze badges asked Aug 16, 2011 at 10:14 Rails beginnerRails beginner 14.5k3535 gold badges140140 silver badges259259 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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

本文标签： javascriptHow to add opacity to a divStack Overflow