Javascript jQuery在我的自制灯箱上的淡入效果

我真的不知道如何解决这个问题。我有这个图像。这是一张图钉图片，当有人点击它时，会弹出更大的图片。请不要告诉我我应该使用一个可下载的灯箱，这对我来说太完美了，除了我想要一个淡入效果，当有人点击它，而不仅仅是弹出的东西

    <a href="javascript:void();" onclick="document.getElementById('image1').style.display='block'; document.getElementById('image1_lightbox').style.display='block';">
    <div class="thumbnail"><img src="image1.jpg" /></div>
    </a>
    <div id="image1" class="underlay" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
    </div>
    <div id="image1_lightbox" class="lightbox">
    <a href="javascript:void();" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
    <div><img width="100%" height="100%" src="image1" /></div>
    <div style="padding-left:6px; padding-bottom:8px; text-shadow:0.1em 0.1em #eee;">Some text asdasdasdasd.</div></a>

您可以使用jQuery中的fadeIn（）方法：

---

fadeIn方法文档：

请在jsfiddle中发布以前从未使用过的jsfiddle中的代码，我希望它很好-JQuery fadeIn函数怎么样，您尝试过吗？

.underlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}

.lightbox{
display:none;
position:fixed;
top:100px;
left:25%;
width:50%;
z-index:100000;
background-color:#fff;
box-shadow:0px 0px 10px 5px #161616;
text-decoration:none;
}

<a href="javascript:void();" onclick="$('#image1').fadeIn(); $('#image1_lightbox').fadeIn();">
<div class="thumbnail"><img src="image1.jpg" /></div>
</a>
<div id="image1" class="underlay" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
</div>
<div id="image1_lightbox" class="lightbox">
<a href="javascript:void();" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
<div><img width="100%" height="100%" src="image1" /></div>
<div style="padding-left:6px; padding-bottom:8px; text-shadow:0.1em 0.1em #eee;">Some text asdasdasdasd.</div></a>