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

Answer 2

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

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

Answer 3

怎么样：

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

非常简单的jQuery覆盖

3 个答案: