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;
    }

但是fadeout不起作用，fadeIn也很快很重。

任何实现它的想法，使它也兼容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 to fadeIn和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);

});

演示here

Answer 2

试试这个：

$(function(){

  $("body").hover(function() {
    $("#bg_black").fadeIn("slow");
  },function(){
    $("#bg_black").fadeOut("slow");
  });


});

全屏黑色bg，不透明度为fadeIn / fadeOut

2 个答案: