我正在尝试使用淡入淡出隐藏 div 制作图像 onclick 功能，问题是我不太了解 jquery 或 javascript。我已经搜索过尝试在 css 中执行此操作，但我听说它有问题，而且我对它 js/jq 的理解还不够，无法拼凑出我需要的代码以及它应该去哪里。
基本上我想要的是：你点击一个图像，图像在隐藏的 div 中淡出，最好使背景变暗（有点像 shadowbox 会）然后点击隐藏 div 中的关闭链接，div 淡出背景恢复正常。
现在我有正常的 div 与要单击的图像、隐藏的 div 和设置的链接。
我知道这是可以做到的，我只是费了好大劲才弄清楚。请帮忙？
::更新代码以反映 JS 更改::
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" />
<title>Title Goes Here</title>
<meta name="keywords" content=" Enter Metatags" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();
</script></head>
<body bgcolor="#547FA1">
<div id="content">
<div id="wrapper">
<div id="holder"><a href="#"><img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /></a>
</img></div>
<div class="shadowdisc">
<p> </p>
<font size=4 color=#999><p align=center>Content for Hidden Div.</p>
<p align=center>Here is more content</p>
<br /><br />
<p align=center>Finishing the content here</p>
<p>
<p>
<p align=center><a href="welcome.html">ENTER</a> <a href="http://www.google.com">EXIT</a></p>
<p>
<p>
<p align=right><a href="#">Close</a>
</font>
</div>
</div>
</div>
</div>
</body
</html>
CSS-
#content{
width: auto;
height: auto;
overflow: hidden;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed
color: #5B5B5B;
}
#wrapper{
width: 1200px;
margin-right: auto;
margin-left: auto;
height: 1100px;
}
#holder{
position: relative;
width: 1200px;
top: 150px;
background-color: #E3E3E3;
height: 594px;
}
.shadowdisc{
width: 900px;
background-image: url(images/disbg.png);
position: relative;
bottom: 400px;
border: 1px solid #999;
left: 148px;
padding: 10px;
display: none;
}
</style>
Javascript
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script>
$(function () { // Onload
$("#showImage").click(function () {
$("#shadowdisc").fadeIn(1000);
});
$("#closeLink").click(function () {
$("#shadowdisc").fadeOut(1000);
});
});
</script>