JQuery 应用问题

具体情况是这样的，我定义了一个<span>，并定义了它的尺寸，现在我用鼠标指向这个<span>，然后弹出一张图片，先前使用的效果是从小变到大：
代码如下：
$('.body_graphic_p2_sketch1').hover(function(){ //.body_graphic_p2_sketch1是span的类
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").attr('src','../../img/prj/p2_paper_sketch1_hover.png').stop() //../../img/prj/p2_paper_sketch1_hover.png是弹出的图片
.animate({
marginTop: '-50px', 
marginLeft: '-30px',
top: '50%', 
left: '50%', 
width: '157px', 
height: '124px',
},0);//动画效果

} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0', 
marginLeft: '0',
top: '0', 
left: '0', 
width: '0', 
height: '0', 
},0);
})这个效果工作得还比较正常，现在我想将这个效果改了，改成渐入渐出的效果：
$(this).find('img').addClass("hover").attr('src','../../img/prj/p2_paper_sketch3_hover.png').stop().fadeIn('slow');
} , function(){
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop().fadeOut('slow');
})
但是这样的话就工作的不正常了，鼠标移上去后，出现了渐变渐出的效果，但是我也搞不清楚为什么移动上去两次之后，再将鼠标移动上去就没有反映了，意思是这个效果只能工作两次；还有就是我应该怎么来控制图片的位置，就是像先前.animate里面一样既可以定义图片位置，也可以定义图片大小，fadeIn好像就只有一个参数
希望Javascript高手指点指点！