非常简单的jQuery覆盖

我正在创建一个固定的单页站点，它使用jQuery部署覆盖。有两个元素组成覆盖层：

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

• #透明覆盖-覆盖整个浏览器窗口的div
• #关于包装器-显示在浏览器窗口中心的一个弹出式div，其中包含文本

这两个div在页面加载时都是隐藏的，并且不透明度为0

覆盖上的这两行jQuery开关：

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

我目前还不知道如何组合jQuery来关闭覆盖——也就是说，将这些元素返回到页面加载时的状态——有人有什么想法吗

根据Karim的建议编辑以下内容：

.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').hide().fadeTo(0, 0);
$('#transparent-overlay').fadeTo(200, 0, function(){
    $(this).hide();
});

那么：

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

---

如果愿意，可以使用自定义事件封装覆盖的隐藏/显示，然后使用页面上的控件触发它们。例如：

$(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");
});

---

您是否尝试过

$（“#透明覆盖”）.hide（）

？@您希望它们何时隐藏？？？一些点击触发器显示正确对不起，我本应该提供更多信息：我想#关于包装器立即关闭，但是#透明覆盖层应该以其淡入的方式淡出。我在这里实现了这样一个关于框+覆盖层：检查它。芒奇下面的回答解决了它-感谢帮助：）谢谢，卡里姆。我无法使自定义事件正常工作，但我已将您的代码添加到我的.js文件中。尽管如此，它仍然不在那里——我将相应地改变我的问题：）