0

我正在尝试制作一个不透明的全屏黑色背景，当鼠标进入正文时它看起来很平滑，当用户离开页面正文（这是整个导航内容屏幕）时它会平滑淡出。

我正在尝试使用此脚本进行操作：

    $("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）

4

2 回答 2

2

我通过在 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);

});

演示在这里

于 2012-11-13T17:59:14.093 回答
1

试试这个：

$(function(){

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


});
于 2012-11-13T18:06:36.317 回答