jQuery mouseover / mouseout延迟，多个元素

Question

我有这一系列的父div（共享同一个类），每个div包含一个孩子。 当我将鼠标悬停在父节点上时，我想向其子节点添加一个类。 当我使用mouseout时，我希望以500毫秒的延迟删除该类。

我认为setTimeout是延迟的方法。 为了防止mouseout在我实际回到父级之后触发removeClass，我想到了使用clearTimeout。 问题是我无法通过触发clearTimeout 仅当新悬停的父级与前一个父级相同时。这样做的结果是，如果我在不到500毫秒的时间内从父A转移到父B，则不会在父A上触发removeClass（正如我实际希望的那样）。

我希望这是有道理的。任何帮助非常感谢！

var timer

$('.parent')
  .mouseover(function() {
    //clearTimeout(timer)
    $(this).children('.child').addClass('red');
  })
  .mouseleave(function() {
    that = this
    timer = setTimeout(function() {
      $(that).children('.child').removeClass('red');
    }, 500);
  });

https://jsfiddle.net/andinse/1wnp82nm/

Answer 1

您应该为每个.parent元素设置特定超时，并将相关上下文绑定到setTimeout回调，例如使用bind()来避免变量that关闭问题：

-DEMO-

$('.parent')
  .mouseover(function() {
    clearTimeout(this.timer)
    $(this).children('.child').addClass('red');
  })
  .mouseleave(function() {
    this.timer = setTimeout(function() {
      $(this).children('.child').removeClass('red');
    }.bind(this), 500);
  });