最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin5浏览0评论

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>
Share Improve this question edited Aug 16, 2011 at 11:10 Lightness Races in Orbit 385k77 gold badges666 silver badges1.1k bronze badges asked Aug 16, 2011 at 10:14 Rails beginnerRails beginner 14.5k35 gold badges140 silver badges259 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

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");
发布评论

评论列表(0)

  1. 暂无评论