javascript - 当 mouseleave 在 slideffect 时间内文本停留

Question

我的意图是，当我将鼠标悬停在#portfolioitem1 div 上时，文本会向上滑动，当我离开时，文本会再次消失。该代码有效，但如果我将鼠标悬停在 div 上并在 slideDown 效果起作用时立即移动(例如 0.3 秒)。

然后文本不会消失并留在那里。我必须再次将鼠标悬停在它上面，并在 0.3 秒后移开我的鼠标，它才能工作。

有什么想法吗？

Javascript

 $('#text').hide();
 $('#portfolioitem1').hover(function (){
    $(this).css('background-color', '#E95850');
    $('#text').slideDown(300);
});
$('#portfolioitem1').mouseleave(function (){
    $(this).css('background-color', '#999999');
    $('#text').hide();
});

html

 <div id="portfolioitem1"><div id="text">vgregvre</div></div>

Answer 1

尝试在隐藏 div 之前停止动画，因为即使在隐藏 div 之后动画仍会继续显示 div。

$('#text').stop(false,false).hide();

http://jsfiddle.net/t57MT/