changing page opacity on .click jquery

Question

Lets say my page has 4 div elements all nested inside each other. I want to add a level of opacity to be above every element except the last nested element, that is triggered when i enter a form element for ex. So far i have this:

$(window).load(function(e){
  $('#main-user-signup').on('click',function(e){
     $("#main-site-header").css("opacity",.1).fadeIn(300, function () {            
        $('#sign-up-text-home').css({'z-index':9999});
     });
   e.preventDefault();
   });
});

2 problems.

1. the #sign-up-text-home is also getting the opacity layer. It is nested inside #main-site-header.

2. how do i change the opacity layer color and not the actual background color.

Answer 1

1. If you change the opacity an element that has child elements, they will all be affected.

2. You can use the opacity part of rgba within background-color like this: rgba(0, 0, 0, 0.1). The last value is opacity of color.

Edit:

$("#main-site-header").animate({
    background-color: rgba(0, 0, 0, 0.1),
}, 300, function() {
     // finish
});

Answer 2

If you change the opacity value of an element all of its children will also be applied by the same opacity value.

However, as @Papa has noted, you can edit the background colour opacity value of a an element without affecting any of the child element's opacity values. Here is an example of how to do it with jQuery thanks to this SO answer.

// Some randomly selected colour value
var color = '#abcdef';
var rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16)
    + ',' + parseInt(color.slice(-4,-2),16)
    + ',' + parseInt(color.slice(-2),16)
    +',0.5)'; // This colour value will be at half opacity.
$('div').css('background-color', rgbaCol)

Otherwise if you want text and other elements inside a parent div to fade too, then you will have to create separate divs with absolute positioning so that they seem like it's in front of the sudo parent div.