JS中如何让图片慢慢消失,然后自动再显示另一张图片?

html：
<div id="box">
  <div class="pic"><img src="图片路径" width="200" height="100" /></div>
  <div class="pic"><img src="图片路径" width="200" height="100" /></div>
  <div class="pic"><img src="图片路径" width="200" height="100" /></div>
  <div class="pic"><img src="图片路径" width="200" height="100" /></div>
</div>

css：
#box{position:relative; width:200px; height:100px;}
.pic{position:absolute; top:0; left:0; width:200px; height:100px; z-index:99; display:none;}

Jquery：
$(window).ready(function(){
  $("#box .pic").eq(0).show();
  var i=0;
  function fad(){
    var m = i%4;
    var n = (i+1)%4;
    $("#box .pic").eq(m).fadeOut(1000);
    $("#box .pic").eq(n).fadeIn(1000);
    i++;

  };
  int = setInterval(fad,3000);
});