jQuery 和执行代码直到 mouseout 被调用答案

【问题标题】：jQuery and executing code until mouseout is calledjQuery 和执行代码直到 mouseout 被调用
【发布时间】：2011-02-19 07:57:18
【问题描述】：

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

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

当一个按钮悬停时，我需要将“滑块”向左移动 30px，当另一个按钮悬停时向右移动 30px。

我的问题是似乎没有可靠的方法来告诉代码鼠标没有离开有问题的地方，除非有一些我没有考虑或阅读过的东西。换句话说，当鼠标悬停在 a 按钮上时，将执行向左移动“滑块”的代码，直到调用 mouseout。我真的不知道该怎么做。

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

有没有更好的方法来做到这一点？

【问题讨论】：

标签： jquery events hover mouseover mouseout

【解决方案1】：

您不必检查鼠标的位置，因为当鼠标离开元素时会触发mouseout 事件。

要在鼠标悬停在元素上时重复移动，请开始一个间隔，当鼠标离开元素时停止：

$(function(){

  var moveInterval;

  $('#moveLeft').hover(function(){
    moveInterval = window.setInterval(function(){
      // here you move the slider
    }, 100);
  }, function(){
    window.clearInterval(moveInterval);
  });

});

【讨论】：

非常感谢，我给@cletus 提供了答案，因为我相信他是第一个发布答案的。我认为最后一个帖子是第一个，但我不确定。如果是相反的方式，我很乐意改变它。谢谢你们俩。
@Tomaszewski：您无法从它们显示的顺序中分辨出哪个答案最先发布。它们以随机顺序显示，特别是为了降低首先发布的重要性，有利于帖子的质量。如果您重新加载页面几次，您将看到具有相同分数切换位置的答案（除了始终首先显示的已接受答案）。如果您将鼠标悬停在大致时间指示上，您将看到准确时间，这表明 cletus 实际上确实首先发布了他的答案。

【解决方案2】：

这很容易。

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

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

和类似的权利。

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

注意：我放在那里的实际效果可能不对，但这完全取决于您使用的滑块插件。根据需要进行调整。

【讨论】：

非常感谢。这正是我一直在寻找的。我不确定是否可以在调用它的函数之外清除Interval，但是当我查看 JavaScript 的文档时，它确实说“ID=setInterval()”，现在一切都清楚了。非常感谢。