Javascript 单击 jQuery 淡入淡出淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1930502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery fadeIn fadeOut with click
提问by Bruno
I'm trying to make a div fadeIn when another div is clicked and fadeOut again when another div is clicked (which would be the close button) but my code doesn't work, did I forget something?
我试图在单击另一个 div 时使 div 淡入，并在单击另一个 div 时再次使 div 淡出（这将是关闭按钮）但我的代码不起作用，我忘记了什么吗？
Here's the CSS:
这是CSS：
body{
margin: 0;
padding: 0;
text-align: center;
background-color:#f0f2df;
}
#container{
border: solid 1px #f0f2df;
background-color:#f0f2df;
text-align: left;
margin: auto;
width: 939px;
height: 570px;
top:41px;
position:relative;
}
#contact_form{
display: none;
background-image:url(../images/bg.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
.contact_close{
display:none;
background-image:url(../images/close.png);
width:17px;
height:17px;
position:absolute;
right:5px;
top:135px;
}
The HTML:
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>test</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/click.js'></script>
</head>
<body>
<div id="container">
<div class="button_contact"></div>
<div id="contact_form">
<div class="button_close"></div></div>
</div>
</body>
</html>
and the JavaScript
和 JavaScript
$(document).ready(function(){
$("button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
回答by scunliffe
you need the "." before button_contact
你需要“。” 在 button_contact 之前
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
回答by Mike
jquery also has a .toggle() function that allows you to pass multi-functions that are "toggled" between each other when the element/s are clicked.
jquery 也有一个 .toggle() 函数，它允许您在单击元素时传递相互“切换”的多功能。
http://api.jquery.com/toggle/a nice function because you can add as many functions as you want.
http://api.jquery.com/toggle/一个不错的功能，因为您可以添加任意数量的功能。
$(document).ready(function(){
$(".button_contact").toggle(function() {
$("#contact_form").fadeIn("slow");
},
function() {
$("#contact_form").fadeOut("slow");
});
});
回答by akearney
you forgot a . before button close...
你忘了一个 . 在按钮关闭之前...
$(".button_contact")....
should work
应该管用
回答by Jon Cram
The selector on your fadeIn button is a bit off. Your original code matches an element with a node nameof button_contactnot with a classof button_contact.
淡入按钮上的选择器有点偏离。您的原始代码匹配与元素节点名的button_contact不带类的button_contact。
Try:
尝试：
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
回答by rosscj2533
$("button_contact").click(function() { should be
$("button_contact").click(function() { 应该是
$(".button_contact").click(function() {
回答by Vincent Ramdhanie
Try this:
尝试这个：
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".button_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
回答by iamwhitebox
I'm sorry but will this syntax work if the link being clicked is an ajax link corresponding to another DIV? I can't seem to get it to work!
抱歉，如果单击的链接是对应于另一个 DIV 的 ajax 链接，此语法是否有效？我似乎无法让它工作！
<script type="text/javascript" src="js/jquery-ajaxLink.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".ajaxLink").ajaxLink();
$(".ajaxlink").click(function() {
$("#content").fadeIn("slow");
});
});
</script>
<ul id="mainNav">
<li> <a class="ajaxLink" href="test1.htm">Who We Are </a></li>
<li> <a class="ajaxLink" href="test2.htm">Benefits</a></li>
<li> <a class="ajaxLink" href="test2.htm">Commercial Terms</a></li>
<li> <a class="ajaxLink" href="test3.htm">Property Types</a></li>
<li> <a class="ajaxLink" href="test3.htm">Commercial Info</a></li>
</ul>
<div id="content"></div>
