Incomplete fade in and out on elements

I have six divs, boxes with content in them, some of which has to fade out on hover, some of it to fade in. Ie each box has an image (which fades out on hover, and fades back in after hover) and some text (which fades in on hover, and fades back out after hover).

I'm using jQuery to do the fades. It all works find, apart from when the mouse moves quickly from one div to another -- in this case the first div is sometimes arrested in its fade, so that the faded elements are stuck at (eg) 50% opacity.

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

Any ideas gratefully received!

---

尝试使用.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/21394.html

上一篇: 使用jquery在mouseout上添加延迟

下一篇: 元素不完全淡入和淡出