jQuery 并执行代码直到调用 mouseout

Question

大家好，我的任务是为我们的网站构建一个 slider 。这是我的目标:

<div id="abc">
  <div id="slider">...</div>
</div>

当一个按钮悬停在上方时，我需要将“ slider ”向左移动 30 像素，当另一个按钮悬停在上方时，需要向右移动 30 像素。

我的问题是，似乎没有可靠的方法来告诉代码鼠标尚未离开有问题的区域，除非有一些我尚未考虑或阅读过的内容。换句话说，当鼠标悬停在按钮上时，将执行向左移动“ slider ”的代码，直到调用 mouseout 为止。我不太确定该怎么做。

我能想到的唯一方法是查看 offsetTop 和 offsetLeft 和 offsetTop DOM 属性并将它们与鼠标位置进行比较，然后运行检查以查看鼠标是否在框，如果没有，它将停止代码的执行。

有更好的方法吗？

Answer 1

这相当简单。

var timerID;
$("#left").hover(function() {
  timerID = setInterval(slideLeft, 1000);
}, function() {
  clearInterval(timerID);
});

function slideLeft() {
  $("#slider").animate({left: -30});
}

右侧类似。

如果在鼠标离开该区域时需要停止某些内容，则只需使用 hover() 即可。否则，您可以简单地使用 mouseover() 事件。

注意:我放在那里的实际效果可能不正确，但它完全取决于您正在使用的 slider 插件。根据需要进行调整。