Question

任何人都可以帮我这个...我有一个按钮，当它悬停时，触发一个动作。但是只要按钮悬停，我就希望它重复一遍。

我很感激任何解决方案，无论是在jquery还是纯javascript中 - 这是我的代码在这一刻看到的方式（在jquery中）：

var scrollingposition = 0;

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

现在我怎么能把它放到某种while循环中，这样#object正在通过px移动px，因为#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是一个好的开始，但当鼠标离开元素（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);
    }
});

Javascript“while while hovers”循环

5 个答案: