当鼠标不应该被神秘地激活时，它会被激活

Question

我有这个盒子，在悬停时播放加载器动画，然后在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');
});

Answer 1

当您mouseover时，设置超时。当您mouseleave时，超时继续运行。您似乎需要在mouseleave上清除超时。

我做了几件事来实现这个目标：

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

var timeoutHandle;

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

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

3）清除mouseleave上的超时：

clearTimeout(timeoutHandle);

Working Example (jsfiddle)

---

正如您所提到的，不再需要expanded类。我把它放在下面的小提琴里。

另外，我添加了代码来停止mouseleave上的任何当前动画，以防盒子处于动画中间。我放慢了＆＃34;扩展＆＃34;动画可以更清楚地说明这一点。

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

Working Example (jsfiddle)