Set transparency of a DIV and its contents using jQuery Set transparency of a DIV and its contents using jQuery jquery jquery

Set transparency of a DIV and its contents using jQuery


$('#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.


Another option - Save your keyboard and use fadeTo:

$('#someDiv').fadeTo("slow",0.5);


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.