我可以补充的覆盖，但我无法将其删除（jQuery的）

问题描述：

此功能将覆盖具有以下属性到整个浏览器画面，我可以补充的覆盖，但我无法将其删除（jQuery的）

$('a.cell').click(function() { 
    $('<div id = "overlay" />').appendTo('body').fadeIn("slow"); 
}); 

#overlay 
{ 
background-color: black; 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0; 
display: none; 
z-index: 100; 
opacity: 0.5; 
}

而这个功能是应该将其删除。

$('#overlay').click(function() { 
    $(this).fadeOut("slow").remove(); 
});

但它似乎绝对没有什么，现在我的网页被卡在一个黑色的过度。删除有什么问题？

答

的问题是，当你添加click处理程序，没有任何重叠，所以你要添加的处理程序空集的元素。

要解决此问题，请使用live方法将处理程序绑定到与#overlay匹配的所有元素，只要它们被创建。

另外，fadeOut不是一个阻塞调用，所以它返回之前，元素完成淡出。因此，您在元素开始淡出之后立即致电remove。

要解决此问题，请使用fadeOut的回调参数在动画完成后调用remove。

例如：

$('#overlay').live(function() { 
    $(this).fadeOut("slow", function() { $(this).remove(); }); 
});

啊，我现在明白了。我没有意识到，一旦页面加载，处理程序就会绑定到元素上。我认为我的JS更像是一个图书馆，一旦发生了变化，然后执行任何与页面上发生的功能相匹配的函数。但现在我想到了，这会非常慢，会占用大量资源。你描述它的方式比我的想法更好。谢谢（你的）信息。 – 2009-10-27 21:34:20

答

尝试：

$('#overlay').live('click', function() { 
     $(this).fadeOut("slow").remove(); 
});

这作品，尽管它似乎在将其消除之前将其删除。 – 2009-10-27 21:30:04

答

删除应该在回调到淡出，像这样：

$('#overlay').live('click', function() { 
    $(this).fadeOut("slow", function() { 
     $(this).remove(); 
    }); 
});

是的，谢谢。这正是我正在寻找的代码。 – 2009-10-27 21:32:13

答

在这里你去。这应该可以解决问题，并在删除叠加层之前让叠加层淡出。

$('#overlay').live("click", function() { 
     $(this).fadeOut("slow", function() { $(this).remove() }); 
});

答

我的建议是使用jquery.tools overlay plugin。您的叠加将有一个触发器（通常是一个按钮或链接），但你可以加载或JavaScript命令，清除它。例如：

JS：

var config = { closeOnClick:true, mask:{opacity:0.7, color:'#333', loadSpeed:1} } 
$("#myTrigger").overlay(config); // add overlay functionality 
$("#myTrigger").data("overlay").load(); // make overlay appear 
$("#myTrigger").data("overlay").close(); // make overlay disappear

HTML：

<div id="myOverlay" style="display:none;">Be sure to set width and height css.</div> 
<button id="myTrigger" rel="#myOverlay">show overlay</button>

我可以补充的覆盖，但我无法将其删除（jQuery的）

相关推荐