Javascript“悬停时”循环

Question

谁能帮我解决这个问题...我有一个按钮，当它悬停时会触发一个动作。但只要按钮悬停，我希望它一直重复。

我很感激任何解决方案，无论是在 jquery 还是纯 javascript 中 - 这是我的代码此时的样子（在 jquery 中）：

var scrollingposition = 0;

$('#button').hover(function(){
++scrollingposition;
    $('#object').css("right", scrollingposition);
    });

现在我怎样才能把它放到某种while循环中，以便#object在#button悬停时逐像素移动，而不仅仅是当鼠标进入它时？

Answer 1

好的......答案又一次尝试：

$('myselector').each(function () {
  var hovered = false;
  var loop = window.setInterval(function () {
    if (hovered) {
      // ...
    }
  }, 250);

  $(this).hover(
    function () {
      hovered = true;
    },
    function () {
      hovered = false;
    }
  );
});

250 表示任务每四分之一秒重复一次。您可以减少此数字以使其更快，或增加它以使其更慢。

Answer 2

Nathan's answer 是一个好的开始，但是你也应该在鼠标离开元素（mouseleave 事件）时使用window.clearInterval 来取消使用@987654324 设置的重复动作@，因为这样“循环”只有在鼠标指针进入元素时才会运行（mouseover事件）。

这是一个示例代码：

  function doSomethingRepeatedly(){
    // do this repeatedly when hovering the element
  }

  var intervalId;

  $(document).ready(function () {

    $('#myelement').hover(function () {
      var intervalDelay = 10;
      // call doSomethingRepeatedly() function repeatedly with 10ms delay between the function calls
      intervalId = setInterval(doSomethingRepeatedly, intervalDelay);
    }, function () {
      // cancel calling doSomethingRepeatedly() function repeatedly
      clearInterval(intervalId);
    });

  });

我在 jsFiddle 上创建了一个示例代码，它演示了如何使用上面显示的代码从左到右滚动元素的背景图像，然后在 hover 上向后滚动：

http://jsfiddle.net/Sk8erPeter/HLT3J/15/

Answer 3

如果是动画，您可以在中途“停止”动画。所以看起来你正在向左移动一些东西，所以你可以这样做：

var maxScroll = 9999;
$('#button').hover(
    function(){ $('#object').animate({ "right":maxScroll+"px" }, 10000); },
    function(){ $('#object').stop(); } );

Answer 4

var buttonHovered = false;
$('#button').hover(function () {
  buttonHovered = true;
  while (buttonHovered) {
    ...
  }
},
function () {
  buttonHovered = false;
});

如果您想对多个对象执行此操作，最好让它比全局变量更面向对象。

编辑： 认为处理多个对象的最佳方法是将其放在 .each() 块中：

$('myselector').each(function () {
  var hovered = false;
  $(this).hover(function () {
    hovered = true;
    while (hovered) {
      ...
    }
  },
  function () {
    hovered = false;
  });
});

编辑2： 或者你可以通过添加一个类来做到这一点：

$('selector').hover(function () {
  $(this).addClass('hovered');
  while ($(this).hasClass('hovered')) {
    ...
  }
}, function () {
  $(this).removeClass('hovered');
});

Answer 5

var scrollingposition = 0;

$('#button').hover(function(){
    var $this = $(this);
    var $obj = $("#object");
    while ( $this.is(":hover") ) {
        scrollingposition += 1;
        $obj.css("right", scrollingposition);
    }
});