Fullscreen black bg with opacity fadeIn/fadeOut

我試圖用不透明度製作一個全屏黑色的bg，當鼠標進入主體並且在用戶離開頁面主體時平滑淡出是整個導航內容屏幕）。這個CSSFullscreen black bg with opacity fadeIn/fadeOut

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

：

我正嘗試用這個腳本做

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

但淡出doesn't作品，也是淡入是非常迅速和沉重。

任何想法實現它，使其也IE兼容？（不使用css3）

來源

2012-11-13 codek

fadeIn函數的第二個參數應該是一個指定緩動函數的字符串，或者是淡入後運行的回調函數。有關更多信息，請參見http://api.jquery.com/fadein/（http://api.jquery.com/fadein/）。 – Bruno

我得到這個工作通過添加一個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

來源

2012-11-13 17:59:14 Bruno

這就是我正在尋找的，謝謝！ – codek

不客氣。樂意效勞。 – Bruno

試着用這一個：

$(function(){ 

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


});

來源

2012-11-13 18:06:36 Jai

請看這裏：http：//jsbin.com/okidiz/1/edit – Jai

Fullscreen black bg with opacity fadeIn/fadeOut

回答

相關問題