javascript - 具有不透明度淡入/淡出的全屏黑色背景

Question

我试图制作一个不透明的全屏黑色 bg，当鼠标进入正文时它会平滑显示，而当用户离开页面正文(即整个导航内容屏幕)时它会平滑淡出。

我试着用这个脚本来做:

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

使用这个 CSS:

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

但是淡出不起作用，而且淡入非常快而且很重。

有什么实现它的想法，让它也与 IE 兼容吗？ (不使用 css3)

Answer 1

我通过向 body 添加一个 div 来实现它。

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

用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 淡入淡出

$("#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);

});

演示 here