jQuery 和 2 淡入一键
这是使 2 个 div 一起淡入的正确方法吗？ （contact_close 应该位于 contact_box 的前面，作为 contact_box 的关闭按钮。
一些 divnames。Javascript
编辑：修复了
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_box").fadeIn("slow");
$(".contact_close").fadeIn("slow");
});
$(".contact_close").click(function() {
$(this).fadeOut("slow");
$("#contact_box").fadeOut("slow");
});
}）；
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_box{
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;
}
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_box">
<div class="contact_close"></div></div>
</div>
</body>
</html>
Is this the right way to make 2 divs fadeIn together? (contact_close should be infront of contact_box to serve as a close button for contact_box.
EDIT: fixed some divnames.
Javascript
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_box").fadeIn("slow");
$(".contact_close").fadeIn("slow");
});
$(".contact_close").click(function() {
$(this).fadeOut("slow");
$("#contact_box").fadeOut("slow");
});
});
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_box{
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;
}
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_box">
<div class="contact_close"></div></div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
是的，没关系。
做很多事情有多种方法，但像这样简单的事情实际上并不需要非常技术性的方法。
Yes, that's fine.
There are various ways to do many things, but something as simple as this doesn't really require a very technical approach.
我没有彻底分析你的代码，但将关闭框放在 div 内部而不是旁边似乎更合乎逻辑。
I didn't analyze your code thoroughly, but it seems more logical to place the close box inside the div, not beside it.
您可以在同一语句中将它们淡入淡出，
这样效率更高，因为 jQuery 只启动一个淡入淡出操作。
You can fade them both in the same statement with
This is more efficient because jQuery only starts one fade operation.