Brett Powell Brett Powell - 7 months ago 10
HTML Question

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

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

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 */
}
Comments