Question

我有六个div，包含内容的盒子，其中一些在悬停时必须淡出，其中一些要淡入.I.e。每个方框都有一个图像（在悬停时逐渐消失，在悬停后淡入淡出）和一些文本（在悬停时淡入，在悬停后淡出）。

我使用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);          
});

感激地收到任何想法！

Answer 1

尝试使用.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);          
});

Answer 2

$('.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 个答案: