Jquery 元素的不完全淡入淡出

我有六个div，盒子里有内容，其中一些必须在悬停时淡出，一些则淡入。也就是说，每个框都有一个图像，悬停时淡出，悬停后淡入，还有一些文本，悬停时淡入，悬停后淡出

我正在使用jQuery进行淡入淡出。除了鼠标从一个div快速移动到另一个div之外，这一切都可以找到——在这种情况下，第一个div有时会在其淡入淡出时停止，因此淡入淡出的元素会停留在例如50%的不透明度

HTML x 6:

jQuery：

感谢您的任何意见

尝试使用.fadeTo而不是.fadeIn和.fadeOut

---

请参考有关函数的官方文档

似乎很好用：在我的firefox上也很好用。有特定的浏览器吗？

<div class="box">
<img class="icon" src="assets/images/icon.png" />
<p class="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.box {
    width:300px;
    height:200px;
    float:left;
    margin:0 10px 10px 0;
    position:relative;
    cursor:pointer;
}

.box p.more {
    font-size:15px;top:80px;opacity:0;
}

.box img.icon {
    position:absolute;top:30px;right:40px;
}

$('.box').hover(function(){     
    $('p.more',this).stop(true).animate({top:'30px',opacity:'1'},'slow');
    $('img.icon',this).stop(true).fadeOut(300);     
},function() {      
    $('p.more',this).stop(true).animate({top:'80px',opacity:'0'},'slow');
    $('img.icon',this).stop(true).fadeIn(300);          
});

$('.box').hover(function(){     
    $('p.more',this).stop(true).animate({top:'30px',opacity:'1'},'slow');
    $('img.icon',this).stop(true).fadeTo(300,0);     
},function() {      
    $('p.more',this).stop(true).animate({top:'80px',opacity:'0'},'slow');
    $('img.icon',this).stop(true).fadeTo(300,1);          
});

$('.box').hover(function(){     
    $('p.more',this).stop(true, true).animate({top:'30px',opacity:'1'},'slow');
    $('img.icon',this).stop(true, true).fadeTo(300,0);     
},function() {      
    $('p.more',this).stop(true, true).animate({top:'80px',opacity:'0'},'slow');
    $('img.icon',this).stop(true, true).fadeTo(300,1);          
});