jquery - 非常简单的 jQuery 覆盖

Question

我正在构建一个固定的单页网站，该网站使用 jQuery 部署覆盖层。覆盖层由两个元素组成:

• #transparent-overlay - 覆盖整个浏览器窗口的 div
• #about-wrapper - 显示在浏览器窗口中央的弹出 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 和 #transparent-overlay 都会重新回到原位，而不是 - 在 #transparent-overlay 的情况下 - 淡入。

请问解决此问题的最佳方法是什么？

Answer 1

你只是做了与你所做的相反的事情。在回调函数中包含元素的隐藏，以便提前运行淡入淡出。

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