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);
});