Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set transparency of a DIV and its contents using jQuery

What is the best way to set the transparency of a HTML DIV element and its contents using jQuery?

like image 887
Keith Adler Avatar asked Aug 20 '09 22:08

Keith Adler


4 Answers

$('#my_element').css({ 'opacity' : 0.7 });

Do you want to actually set the opacity to each of the contained elements as well, or you just want it to 'appear' as if the child elements have the same opacity?

As an example to my question, if you wanted something that sets an element, and each of the children elements, you could do something like this

html

<div id="my_element">
  <div>
    lorem
  </div>
  <div>
    ipsum
  </div>
</div>

jquery

$('#my_element').children().
                 css({ 'opacity' : 0.25 }).
                 end().
                 css({ 'opacity' : 0.25 });

Hope this helps. Cheers.

like image 60
theIV Avatar answered Nov 10 '22 13:11

theIV


Another option - Save your keyboard and use fadeTo:

$('#someDiv').fadeTo("slow",0.5);
like image 10
redsquare Avatar answered Nov 10 '22 12:11

redsquare


As theIV said you can use the css method, but as an alternative you can use animate:

$('#my_element').animate({ opacity: 0.5 }, 100);

this will animate the opacity of you div (and its contents) to 0.5 (from whatever it was to begin with) in 100 milliseconds.

like image 1
Darko Z Avatar answered Nov 10 '22 11:11

Darko Z


Try this properties

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

like image 1
subindas pm Avatar answered Nov 10 '22 13:11

subindas pm