javascript - Mouseenter在不应该激活的时候被神秘激活

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

http://jsfiddle.net/frank_o/WwD5V/23/embedded/result/

但是，如果我按照以下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');
});

最佳答案

mouseover时，将设置超时。当您mouseleave时，超时将继续运行。看来您需要清除mouseleave上的超时。

为了做到这一点，我做了几件事：

1）在脚本顶部增加变量timeoutHandle的范围：

var timeoutHandle;

2）从var的超时定义中删除mouseenter：

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

3）清除mouseleave上的超时：

clearTimeout(timeoutHandle);

Working Example (jsfiddle)



如您所述，不再需要expanded类。我在下面的小提琴中将其删除。

另外，我添加了代码以停止mouseleave上的任何当前动画，以防该框位于动画中间。我放慢了“扩展”动画，以更清楚地说明这一点。

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

Working Example (jsfiddle)

关于javascript - Mouseenter在不应该激活的时候被神秘激活，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23963557/