非常簡單的jQuery覆蓋

我正在放置一個固定的，單頁網站，使用jQuery部署覆蓋。有兩種元素組成覆蓋：非常簡單的jQuery覆蓋

＃透明覆蓋層 - 覆蓋整個瀏覽器窗口，一個div
＃約 - 包裝 - 彈出DIV顯示在瀏覽器窗口的中心，包含文本

兩種這些div是隱藏在頁加載並具有不透明度：0

jQuery的開關的上覆蓋這兩條線：

$('#transparent-overlay').show().fadeTo(200, 0.5); 
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);

我目前無法確定如何將jQuery關閉疊加層 - 即將這些元素返回到頁面加載時的狀態 - 任何人有任何想法？

編輯遵循以下卡里姆的建議：

的js文件，現在內容如下：

$(document).ready(function() { 
    about_click(); 
    about_close(); 
}); 

function about_click() { 
    $('#about').click(function() { 
     $('#transparent-overlay').show().fadeTo(200, 0.5); 
     $('#about-wrapper').delay(200).show().fadeTo(170, 1.0); 
    }); 
} 

function about_close() { 
    $('#about-close').click(function() { 
     $('#about-wrapper').hide(); 
     $('#transparent-overlay').fadeOut(200); 
    }); 
}

這完全加載覆蓋，然後隱藏它完美。但是，當我重新加載覆蓋層時，＃about-wrapper和＃transparent-overlay都會回到原位，而不是 - 在透明覆蓋層的情況下 - 淡入。

什麼是最佳方式去解決這個問題吧？

來源

2010-12-08 Jim

您嘗試過使用$（'＃transparent-overlay'）。hide（）`？ – gideon 2010-12-08 17:30:53

@你想讓他們隱藏嗎？一些點擊觸發器，以顯示正確 – kobe 2010-12-08 17:32:23

對不起，我應該提供更多的信息：我想＃關閉包裝立即關閉，但＃transparent-overlay應該淡入淡出相同的方式。 – Jim 2010-12-08 17:33:42

你只是做與你所做的相反。將元素隱藏在回調函數中，以便預先運行淡入淡出。

$('#about-wrapper').hide().fadeTo(0, 0); 
$('#transparent-overlay').fadeTo(200, 0, function(){ 
    $(this).hide(); 
});

來源

2010-12-08 17:35:04 munch

如何：

$("#about-wrapper").hide(); 
$("#transparent-overlay").fadeOut("slow");

來源

2010-12-08 17:36:56 Zevan

如果你喜歡，你可以使用自定義事件來封裝隱藏/透露您的疊加，然後把它們用你的頁面上的控件觸發。例如：

$(document).bind("overlay-reveal", function() { 
    $('#transparent-overlay').show().fadeTo(200, 0.5); 
    $('#about-wrapper').delay(200).show().fadeTo(170, 1.0); 
}).bind("overlay-close", function() { 
    $('#about-wrapper').hide(); 
    $('#transparent-overlay').fadeOut(200); 
}); 

$(".closeOverlay").click(function() { 
    $(document).trigger("overlay-close"); 
}); 

$(".showOverlay").click(function() { 
    $(document).trigger("overlay-reveal"); 
});

來源

2010-12-08 17:43:41 karim79

非常簡單的jQuery覆蓋

回答

相關問題