Javascript 当鼠标不应该启动时，它会神秘地启动'；T

我有一个框，它在悬停时播放加载程序动画，然后在2秒后展开：

但是，如果我在下面的V形运动中移动鼠标，它为什么会立即扩展（没有加载程序动画）

var timeout;

$('.wrapper').bind('mouseenter', function () {
  if(!$('.wrapper').hasClass('expanded')) {

    $('.loader').show();

    // http://stackoverflow.com/questions/23922264/jquery-animate-goes-bananas-despite-stop

    var timeoutHandle = $(this).data('timeout') || 0;

    if (timeoutHandle > 0) clearTimeout(timeoutHandle);

    timeoutHandle = setTimeout(function () {
        $('.wrapper').animate({
            width: '100%'
        }, 200);

        $('.wrapper').addClass('expanded');
    }, 2000);

    $(this).data('timeout', timeoutHandle);
  }
}).mouseleave(function () {
    $('.loader').hide();

    $('.wrapper').animate({
        width: '120px'
    }, 200);

    $('.wrapper').removeClass('expanded');
});

---

当您将鼠标置于上方时，将设置超时。当您

mouseleave

时，超时将继续运行。似乎需要在

mouseleave

时清除超时

为此，我做了几件事：

1） 增加脚本顶部变量

timeoutHandle

的范围：

var timeoutHandle;

2） 从

mouseenter

中的超时定义中删除

var

：

timeoutHandle = $(this).data('timeout') || 0;

3） 清除鼠标移动时的超时时间：

clearTimeout(timeoutHandle);

---

正如您所提到的，不再需要

扩展的

类。我把它放在下面的小提琴上

另外，我还添加了代码来停止在<代码> MouSeleave<代码>下的任何当前动画，以防盒子处于动画的中间。为了更清楚地说明这一点，我减慢了“扩展”动画的速度

$('.wrapper').stop(true,false).animate({
    width: '120px'
}, 200);

---

如果鼠标在加载2秒之前离开div，您需要取消扩展div？太棒了，再次感谢。另外，如果你还有其他的事情，你也会做得不一样。干杯