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 に答える