jQuery：淡入/淡出效果
[英]JQuery: fadein/fadeout effect
问题描述
I'm new to JQuery and am hoping someone can help out with the problem I'm having. 
我是JQuery的新手，希望有人可以帮助解决我遇到的问题。
I setup a JSFiddle Page with the issue I'm having for ease of helping me: http://jsfiddle.net/66Bwp/ 我设置了一个JSFiddle Page来解决我遇到的问题： http : //jsfiddle.net/66Bwp/
The problem: When I click on the button "Test 1" or "Test 2" and then click on the black overlay that produces, the overlay disappears, however the content that was faded in stays on the page until the "cancel" button is pressed. 问题：当我单击按钮“测试1”或“测试2”，然后单击生成的黑色覆盖时，该覆盖消失了，但是淡入的内容保留在页面上，直到“取消”按钮被按下。
Interesting Side Note: If I click on the button "Test 1" or "Test 2" to produce the content effect, and then click cancel, everything works as intended (overlay and content fade out), and then if I click the button "Test 1" or "Test 2" again, without reloading the page, and then click the overlay, everything works as intended. 有趣的一面：如果我单击“测试1”或“测试2”按钮以产生内容效果，然后单击“取消”，则一切按预期进行（覆盖和内容淡出），然后如果我单击按钮“再次进行“测试1”或“测试2”，而无需重新加载页面，然后单击覆盖图，一切按预期进行。
The Javascript File: JavaScript文件：
$(document).ready(function(){
lbHide();
})
function lbShow( idName ) {
$("#lbOverlay, #" + idName).fadeIn(300);
}
function lbHide( idName ) {
$("#lbOverlay, #" + idName).fadeOut(300);
$("#lbOverlay").click(function() {
$("#lbOverlay, #" + idName).fadeOut(300);
})
}
The CSS File: CSS文件：
#lbOverlay{
display:none;
background:#000000;
opacity:0.4;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lbExampleOne{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
#lbExampleTwo{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
The HTML File: HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lightbox Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="css/master.css" />
</head>
<body>
<button id="show-panel" onClick="lbShow('lbExampleOne')">Test 1</button>
<button id="show-panel" onClick="lbShow('lbExampleTwo')">Test 2</button>
<div id="lbExampleOne">
<h2>Example Content One</h2>
<p><button type="reset" id="close-panel" onClick="lbHide('lbExampleOne')">Cancel</button>
</div>
<div id="lbExampleTwo">
<h2>Example Content Two</h2>
<p><button type="reset" id="close-panel" onClick="lbHide('lbExampleTwo')">Cancel</button></p>
</div>
<div id="lbOverlay"></div>
</body>
</html>
I'm not sure what the problem could be. 我不确定是什么问题。 Does anyone have any suggestions? 有没有人有什么建议？
Thanks! 谢谢！
2 个解决方案
解决方案1
3 已采纳 2013-01-16 17:31:21
Change your lbHide function to this: 将您的lbHide函数更改为此：
function lbHide(idName) {
$("#lbOverlay, #" + idName).fadeOut(300);
$("#lbOverlay").click(function () {
$("#lbOverlay, #lbExampleOne, #lbExampleTwo").fadeOut(300);
})
}
When your overlay is clicked, there is no idName parameter being passed to it, so just fade out the divs. 单击叠加层时，没有idName参数传递给它，因此只需淡出div。 You should probably give them classes to make them easier to refer to. 您可能应该给它们提供类，以使它们更易于引用。
解决方案2
1 2013-01-16 17:30:59
It's because when you are clicking on the overlay you are are calling the click event that you have assigned to it. 这是因为当您单击叠加层时，您正在调用已分配给它的click事件。 The problem is that the click event uses the idName variable which has no value at this point in time. 问题在于click事件使用了idName变量，该变量在当前时间没有值。
Therefore the overlay fades but not your other elements 因此，叠加层会逐渐消失，而其他元素不会
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.