jQuery mouseover/mouseout延迟，多个元素

Question

我有这一系列 parent div（共享相同的 class），每个都包含一个 child。当我将鼠标悬停在 parent 上时，我想将 class 添加到它的 child。当我 mouseout 时，我想以 500 毫秒的延迟删除 class。

我认为 setTimeout 是延迟的方法。为了防止 mouseout 在我实际回到 parent 后触发 removeClass，我想到了使用 clearTimeout。问题是我无法让 clearTimeout 被触发仅当新悬停的 parent 与前一个相同时。这样做的结果是，如果我在不到 500 毫秒的时间内从 parent A 悬停到 parent B，则不会在 parent 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);
  });

jQuery mouseover/mouseout延迟，多个元素

jQuery mouseover/mouseout delay, multiple elements

jquery

mouseover

delay

mouseout

-DEMO-