.show（）工作但不工作.fadeIn（200）

Question

为什么我可以.show（）我的'overlay'div而不是.fadeIn（200）？
在'overlay'div通过.show（）显示后，它不会像fadeOut（）一样，如果div从未隐藏在第一个位置然后点击它。

CSS:
-----------

#overlay
{
    height:97%;
    width:99%;
    border:1px solid black;
    position:absolute;
    background-color:black;
    opacity:0.8;
}

#batman
{
    position:absolute;
    z-index:-1;
}

#lightbox-img
{
    height:100px;
    width:200px;
    margin-left:600px;
    margin-top:270px;
    position:absolute;
    z-index:1;
}



JavaScript:
-----------
window.onload = function()
{
  $("#overlay").hide();
}


$(document).ready(function(){
 //page is ready

    $("#overlay").on("click",function(){
      $('#overlay').fadeOut(1000);
    });

    $('#batman').on("click",function(){
      lightboxImg()
    });

  });


function lightboxImg()
{
  $('#overlay').hide().fadeIn(2000);

  var source = $('#batman').attr('src');
  var text = "<img src= \"" +  source +  "\"  id=\"lightbox-img\"></img> ";
  document.body.innerHTML = text + document.body.innerHTML;
}