Question

I´m trying to make a full screen black bg with opacity, it appears smoothly when the mouse enters to the body and fade out smoothly when the user leaves the body of the page (which is the whole nav content screen).

I´m trying doing it with this script:

    $("body").bind('mouseover', function() {
        $("#bg_black").fadeIn("slow", 0.33);
    });
    $("body").bind('mouseleave', function() {
        $("#bg_black").fadeOut();
    });

with this css:

    #bg_black{
        position: absolute;
        z-index: 1;
        background: black;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        display: none;
    }

But the fadeout doesn´t works and also the fadeIn is very quickly and heavy.

Any ideas to achieve it, to make it also IE compatible? (not using css3)

Answer 1

I got this working by adding a div to body.

<div id="bg"></div>

styled it with css

#bg {

  // so if user scrolls it doesn't matter
  position: fixed; 
  background-color: black;

  // expand to height & width
  height: 100%;
  width: 100%;
  margin: 0;
  padding:0;

  // hidden initially
  opacity: 0;
}

body {
  background-color: white;
}

javascript to fadeIn and fadeOut

$("#bg").hover(function() {

  // should user hover in and out quickly stop animations
  $(this).stop().animate({ opacity: 1 }, 1000);

}, function( ) {

  // should user hover in and out quickly stop animations
  $(this).stop().animate({ opacity: 0 }, 1000);

});

Demo here