JQuery Fade In/Out causes other DIV's to Flicker

Question

I have created a simple landing page for our website and its basically an image that occupies the entire page and a nav bar at the top that sits on top with a .5 alpha. When I use jQuery to fade the backgrounds in/out, it makes this nav bar fade in/out too.

How can I fix this?

Javascript:

<script>
$(".loadHome").click(function(e)
{
    e.preventDefault();
    $('#bg-locations').fadeOut('fast');
    $('#bg-features').fadeOut('fast');
    $('#bg-home').fadeIn('fast');
});
$(".loadLocations").click(function(e)
{
    e.preventDefault();
    $('#bg-home').fadeOut('fast');
    $('#bg-features').fadeOut('fast');
    $('#bg-locations').fadeIn('fast');
});
$(".loadFeatures").click(function(e)
{
    e.preventDefault();
    $('#bg-home').fadeOut('fast');
    $('#bg-locations').fadeOut('fast');
    $('#bg-features').fadeIn('fast');
});
</script>

Answer 1

Your divs are fading in/out over your header.

Change your #header style to be:

#header {
  height: 210px;
  width: 100%;
  background: rgba(38, 38, 38, .5);
  overflow: hidden;
  text-align: center;
  position: relative; /* Add this line */
}