元素不完全淡入和淡出
我有六个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);
});
任何想法感激地收到！
尝试使用.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);
});
$('.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);
});
请参考有关'停止'功能的官方文件
链接地址: http://www.djcxy.com/p/21393.html