Trying to fadeto body and not children div nested several levels down

Question

I am trying to fade the body of the page so that the background color is what it fades to. I have a div that is nested several layers in the document that I do not want to fade.

body > .container > .bootstrap-body > .do_not_fade_this_div

html

<body>
    <div class="container">
        <div class="bootstrap-body">
            <div class="do_not_fade_this_div"></div>
        </div>
    </div>
</body>

jquery

I tried this but this will fade the body but also the div I dont want.

$('body').children(':not(.container > .bootstrap-body > .do_not_fade_this_div)').fadeTo("fast", 0.2);

This fades the background and not .do_not_fade_this_div like I want but since it is not fading the body the color is wrong.

$('.bootstrap-body').children(':not(.do_not_fade_this_div)').fadeTo("fast", 0.2);

How do I fade the body and not that particular div?

Are you changing the opacity of a background color? If so, you can [animate the color using `rgba()`](https://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css). Otherwise, I don't think you can change the `opacity` of a parent without affecting its children; you might consider using [an element that covers the entire page](https://stackoverflow.com/questions/3250790/making-a-div-that-covers-the-entire-page) rather than the `` element itself. — showdev, Jul 03 '18 at 00:28

showdev · Answer 1 · 2018-07-03T01:05:12.123

In general, you can't change the opacity of an element without affecting its children.
However, you could use CSS3 transition to animate the alpha transparency of the <body>:

jQuery(document).on('click', function() {
  jQuery('body').addClass('lighter');
});

body {
  background-color: rgba(255, 180, 170, 1);
  transition: background-color .5s;
}

body.lighter {
  background-color: rgba(255, 180, 170, .2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bootstrap-body">
    <div class="do_not_fade_this_div">click anywhere</div>
  </div>
</div>

Alternatively, you could create an "underlay" element that sits behind the <body>, for which the opacity will not affect other elements on the page:

jQuery(document).on('click', function() {
  jQuery('#overlay').addClass('lighter');
});

body {
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: lightgreen;
  z-index: -1;
  opacity: 1;
  transition: opacity .5s;
}

#overlay.lighter {
  opacity: .2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlay"></div>

<div class="container">
  <div class="bootstrap-body">
    <div class="do_not_fade_this_div">click anywhere</div>
  </div>
</div>

Also see Parent div transparent background but not affect child div transparency.

OMG I totally figured it out. Since the div has a placement of `top: 0px; right: 0px` and is hidden until someone clicks on it (which I didn't mention) it doesn't matter where the div is so I placed it right after the `` tag and it works fine lol. — Cesar Bielich, Jul 03 '18 at 01:22

Trying to fadeto body and not children div nested several levels down

1 Answers1