jquery或javascript图像onclick div fadein/link onlcick div fadeout

我正在尝试用一个fadein隐藏的div创建一个image onclick函数，问题是我对jquery或javascript不太了解。我曾试图用css来做这件事，但我听说它的bug太多了，我对js/jq的理解还不够，无法拼凑出我需要的代码和应该放在哪里

基本上我想要的是： 单击图像，图像在隐藏分区中淡出，最好使背景变暗（有点像阴影盒），然后单击隐藏分区中的关闭链接，分区淡出，背景恢复正常

现在我有一个普通的div，其中包含要单击的图像、隐藏的div和设置的链接

我知道这是可以做到的，我只是花了很长时间才弄明白。请帮忙

：：更新代码以反映JS更改：：

HTML-

标题在这里
Shadowbox.init（）；

隐藏Div的内容
这里有更多内容



在此处完成内容






下面是一个如何使用JQuery和一点CSS的例子
HTML

<button id="showButton">Show Panel</button>
<div id="hiddenPanel" class="hidden">
  <p>I'm a hidden div</p>
  <button id="closeButton">close me</button>
</div>

JavaScript

<script>
  $(function () { // Onload

    $("#showButton").click(function () {
      $("#hiddenPanel").fadeIn(1000);
    });

    $("#closeButton").click(function () {
       $("#hiddenPanel").fadeOut(1000);
    });

  });
</script>


$（函数（）{//Onload
$（“#显示按钮”）。单击（函数（）{
美元（“#hiddenPanel”）.fadeIn（1000）；
});
$（“#关闭按钮”）。单击（函数（）{
美元（“#隐藏面板”）。淡出（1000）；
});
});

jQ:

$（'.thumb'）。单击（函数（）{
var src=$（this.attr（'src'）；
$（'#lightbox'）。追加（''）.fadeTo（800,1）；
});
$（“#lightbox”）。单击（函数（）{
$（this）.fadeTo（800,0，function（）{
$（this.empty（）.hide（）；
});
});
发布您迄今为止所做的工作，而不是重新发明轮子，为什么不使用现有的jQuery插件，如？colorbox是否可以隐藏div？我的理解是，大多数/所有的/box插件都只做图像/媒体。jQuery文档中有一些示例，您几乎可以直接复制和粘贴，以实现您的目的：向下滚动并查看演示。Adrien-我看到了无数的示例，但我仍然不明白如何将其应用于我的情况。当涉及到函数和它们如何工作时，我显然完全不知道。这就像…我知道我应该使用哪些，但我不知道它们去哪里/顺序如何/或与我的网站有关。那真的不起作用。我还是不明白。我试着用buttonId替换我的imageId，用我的div id替换我已经隐藏的div，用closeButton替换我的close链接id，然后将带有打开/关闭标记的JQ放在我的html标题和正文中，但仍然没有起作用。请参阅更新的答案。您可以将其作为页面的一部分加载到脚本块中，也可以作为单独的JS文件加载。添加对代码的更改以反映您的答案。预览仍然无法正常工作。问题/错误是什么？您可以创建一个JSFIDLE来演示吗？没有错误，单击图像时隐藏的div不会显示。我试着做一个JSFIDLE，但我不知道如何向其中添加图像…？我喜欢你的示例，但我不理解它。我很想把背景调暗，以便我的工作。
     <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>

<button id="showButton">Show Panel</button>
<div id="hiddenPanel" class="hidden">
  <p>I'm a hidden div</p>
  <button id="closeButton">close me</button>
</div>

.hidden {
    display: none;
    opactiy: 0;
}

<script>
  $(function () { // Onload

    $("#showButton").click(function () {
      $("#hiddenPanel").fadeIn(1000);
    });

    $("#closeButton").click(function () {
       $("#hiddenPanel").fadeOut(1000);
    });

  });
</script>

<div id="lightbox"></div>
<img class="thumb" src="img1.jpg" alt="" />   
<img class="thumb" src="img2.jpg" alt="" /> 

*{margin:0;padding:0;}
h2, p{padding:30px;}

#lightbox{
  position:fixed;
  top:0px;
  left;0px;
  background:rgba(0,0,0,0.6);
  width:100%;
  height:100%;
  text-align:center;
  cursor:pointer;
  display:none;
}
#lightbox > img{
  position:relative;
  height:400px;  
  top:50%;
  margin:-200px auto;
  display:inline;
  box-shadow:0 3px 25px #000, 0 0 0 5px rgba(255,255,255,0.4);
  width:auto;
}


.thumb{
  float:left;
  padding:10px;
  width:180px;
  cursor:pointer;
} 

$('.thumb').click(function(){
  var src = $(this).attr('src');
  $('#lightbox').append( '<img src="'+src+'"/>' ).fadeTo(800,1);

});

$('#lightbox').click(function(){
  $(this).fadeTo(800,0, function(){
    $(this).empty().hide();
  });
});