淡出div以显示悬停时的背景图像

Question

我正在尝试制作我的jQuery，以便悬停淡出跨度以显示下面的bgSky div，但我无法使其工作。 CSS有效，但我希望使用JavaScript为其设置动画，使其看起来更漂亮。这是代码：

HTML：

<div id="mainTbl">
  <div id="bgSky">
    <table id="menu">
      <tr>
        <td colspan="2"><a href=""><span class="genAnchor"><img src="images/physicalArchives.png" class="genImages" style="width:55%;"/></span></a></td>
      </tr>
      <tr>
        <td class="border"><a href=""><span class="genAnchor"><img src="images/30s.png" class="genImages"/></span></a></td>
        <td><a href=""><span class="genAnchor"><img src="images/40s.png" class="genImages"/></span></a></td>
      </tr>
      <tr>
        <td class="border"><a href=""><span class="genAnchor"><img src="images/50s.png" class="genImages"/></span></a></td>
        <td><a href=""><span class="genAnchor"><img src="images/60s.png" class="genImages"/></span></a></td>
      </tr>
      <tr>
        <td class="border"><a href=""><span class="genAnchor"><img src="images/70s.png" class="genImages"/></span></a></td>
        <td><a href=""><span class="genAnchor"><img src="images/80s.png" class="genImages"/></span></a></td>
      </tr>
      <tr>
        <td class="border"><a href=""><span class="genAnchor"><img src="images/90s.png" class="genImages"/></span></a></td>
        <td><a href=""><span class="genAnchor"><img src="images/00s.png" class="genImages"/></span></a></td>
      </tr>
      <tr>
        <td colspan="2"><a href=""><span class="genAnchor"><img src="images/10s.png" class="genImages"/></span></a></td>
      </tr>
    </table>
  </div>
</div>

CSS

html, body, div, span, table, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  padding: 0;
}
body{
  background:#C71C2D;
  text-align:center;
  font-family:"Tw Cen MT",sans-serif;
}
h1{
  color:white;
  font-size:240%;
}
#logo{
  height:30px;
  width:298px;
  position:absolute;
  left:30px;
  top:30px;
}
/*-- INDEX SETTINGS --*/
td{
  padding-right:1;
  padding-bottom:1;
}
tr{
  border-top: 1px solid #9ea8a9;
  border-bottom: 1px solid #9ea8a9;
}
#menu{
  position:absolute;
  top:0;
  left:0;
  border-collapse:collapse;
  text-align:center;
  margin:0 auto;
  width:100%;
  height:100%;
}
.border{
  border-right:1px solid #9ea8a9;
} 
a{
  display:table;
  position:relative;
  width:100%;
  height:100%;
}
.genAnchor{
  display: table-cell;
  border:1px solid white;
  text-align:center;
  vertical-align: middle;
  background-color:rgba(255,255,255,1);
}
.genAnchor:hover{
  background:rgba(0,0,0,0);
}
#mainTbl{
  position:relative;
  width:55%;
  margin:10 auto;
  padding:50px 0 50px;
  height:75%;
  background:white;
}
.genImages{
  height:1in;
  width:2.25in;
}
#bgSky{
  position:relative;
  background-image:url("images/sky.jpg");
  background-size:cover;
  width:70%;
  height:100%;
  margin:0 auto;
} 

JS

$(function(){
  $("td").hover(function(){
    $(this).fadeOut(0.5, function(){
      $(this).fadeIn();
    });
  });
});