使这个jQuery幻灯片交叉淡入淡出

Question

我在我的主页部分创建了幻灯片，现在是：

$(document).ready(function(){

  var count = 0;
  //replace these images with external ones to test
  var images = ["http://anamarcela.info/imgs/bg2.jpg",
                "http://4.bp.blogspot.com/_N_mOB63qPaE/TTSdf7e6YAI/AAAAAAAARsU/YuG9YakI-VI/s1600/3d-wallpaper-Nature.jpg",
                "http://m.jinjianginns.com/images/1.png",
                "http://onepage.owenforsyth.com/1page/wp-content/uploads/2016/03/bg3.jpg"];
  var image = $(".fader");

  image.css("background-image","url("+images[count++]+")");

  setInterval(function(){
    image.fadeOut(500, function(){
      image.css("background-image","url("+images[count++]+")");
      image.fadeIn(500);
    });
    if(count == images.length)
    {
      count = 0;
    }
  },4000);

});

.fader {
  position: absolute;
  height: 100%;
  width: 100%;
  left:0;
  top:0;
  z-index: -99;
    background-repeat: no-repeat;
    background-size: cover;
}

.home {
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
    padding: 9em 0 41em 0;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Home --->
    <div class="container-fluid home" id="home">
      <section class="row">
        <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
          <h1 class="main">urbanphenomena</h1>
          <h1 class="sub-main">design+research</h1>
        </div>
      </section>
         <div class="fader">
        
        </div>
        </div>

我想让图像交叉淡入淡出，但它会淡入淡出，并且在淡入淡出之间闪烁是令人讨厌的。如何让它交叉淡入淡出？

你认为.animate（）JQuery能做到吗？

谢谢！