Javascript“悬停时”环形

Question

任何人都可以帮助我解决这个问题...我有一个按钮，当悬停时会触发一个操作。但我希望只要按钮悬停就重复它。

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

var scrollingposition = 0;

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

现在我如何将其放入某种 while 循环中，以便 #object 将 px 移动px for #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

内森的回答是一个好的开始，但是您还应该使用< a href="https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval" rel="nofollow noreferrer">window.clearInterval 当鼠标离开元素时（mouseleave 事件）取消使用 setInterval()，因为这样“循环”仅在鼠标指针进入时运行元素（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;
  });
});

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

$('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);
    }
});