元素淡入淡出不完整答案

【问题标题】：Incomplete fade in and out on elements元素淡入淡出不完整
【发布时间】：2014-06-29 16:04:54
【问题描述】：

我有六个 div，其中包含内容的框，其中一些必须在悬停时淡出，其中一些必须淡入。即每个框都有一个图像（悬停时淡出，悬停后淡入）和一些文本（悬停时淡入，悬停后淡出）。

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

HTML (x 6)：

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

CSS：

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

jQuery：

$('.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);          
});

任何想法都非常感谢！

【问题讨论】：

在小提琴中似乎可以正常工作：jsfiddle.net/X6fxd
在我的 Firefox 上也能正常工作。任何特定的浏览器？

标签： jquery css fadein fadeout

【解决方案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);          
});

'stop'函数请参考官方文档

【讨论】：

【解决方案2】：

尝试使用.fadeTo() 代替.fadeIn() 和.fadeOut()，

$('.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);          
});

【讨论】：