fade out all objects except one

Question

So I have a div with a background that covers the entire view. Inside of that i have an h2-tag. Is it possible to fade-out the background, whilst unfading the h2-tag?

The structure of the website prevents me from moving the h2-tag outside of the div.

eg.

$('#intro').fadeTo('slow',0.67,function(){
                $("h2").css("color","black");
                $("h2").css("opacity","1");

Answer 1

This is not possible with fadeTo, because it relies on opacity to control the fade, and you can't set opacity of a child differently than opacity of the parent.

However, see this answer for how to do it using rgba transitions.

You can see this fiddle for fading the div in the background, which you can have fade to zero opacity to effectively make it disappear.

$(function () {
  setTimeout(function () {
    $('#background').animate({
      backgroundColor: 'rgba(0,0,0,0.0)'
    });
  }, 2000);
});

https://jsfiddle.net/p7a4xm7u/8/