Question

我的意图是当我将鼠标悬停在＃portfolioitem1 div上时，文本会向上滑动，当我离开时，文字会再次消失。该代码可以工作，但如果我将鼠标悬停在div上并在slideDown效果工作时立即移开（例如0.3秒）。

然后文本不会消失并停留在那里。而且我必须再次盘旋它并在0.3秒后移除我的mous以使其工作。

有人有想法吗？

的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

试试这个：

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

<强> DEMO

Answer 2

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

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

http://jsfiddle.net/t57MT/

当mouseleave在slideffect时间内文本保持不变时

2 个答案: