褪色使用jquery的背景图片只允许一张图片，如何从一个背景淡入另一个背景？

Question

我不擅长js＆amp; jquery和我试图用悬停按钮编写一个淡化效果背景滑块。到目前为止，我编写的代码正在工作，但并不是我想要的。我想悬停链接按钮会使背景淡入另一个背景图像。

然而现在我得到的是链接按钮使背景淡出然后另一个背景图像淡入。只是不喜欢中间的空白背景。

$(document).ready( function(){ 
 $('a.one').hover( function(){ 
   $('#bgFader').fadeOut( 'slow', function(){
      $('#bgFader').removeClass().addClass('bg2').fadeIn('slow');
   })
 })
 $('a.one').mouseout( function(){ 
   $('#bgFader').fadeOut( 'slow', function(){
      $('#bgFader').removeClass().addClass('bg1').fadeIn('slow');
   })
 })
});

$(document).ready(function(){ 
 $('a.two').hover( function(){ 
   $('#bgFader').fadeOut( 'slow', function(){
      $('#bgFader').removeClass().addClass('bg3').fadeIn('slow');
   })
 })
 $('a.two').mouseout( function(){ 
   $('#bgFader').fadeOut( 'slow', function(){
      $('#bgFader').removeClass().addClass('bg1').fadeIn('slow');
   })
 })
});

#bgFader {
  position:absolute;
  top:0px;
  left:0px;          /* or whatever value is good for u */
  z-index: 1;
}
#content {
  background-color: transparent;
  position:absolute;       /* or whatever value is good for u */
  z-index: 10;
}

.bg1{  
  background: transparent url(https://meloholica.files.wordpress.com/2010/02/be-happy.jpg) no-repeat top left scroll;
  width: 100%;
  height: 100%;
}
.bg2{  
  background: transparent url(http://media.mnn.com/sites/default/files/editorial/happy%20habits_0.jpg) no-repeat top left scroll; 
   width: 100%;
  height: 100%;
}
.bg3{  
  background: transparent url(http://fs102.jpe.ru/ff30/4192417_a35633bb.jpg) no-repeat top left scroll; 
   width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bgFader" class="bg1"></div>
  <div id="content">
    <a class="one" href="#">link1></a>
    <a class="two" href="#">link2></a>
  </div>

http://jsfiddle.net/ming725/1wyzL81p/

我想我应该改变.css背景而不是类。

请让我知道你的想法，并感谢任何喜欢帮助的人。