Javascript“悬停时"环形

2022-01-22 00:00:00 hover jquery javascript

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

Can anybody help me on this one...I have a button which when is hovered, triggers an action. But I'd like it to repeat it for as long as the button is hovered.

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

I'd appreciate any solution, be it in jquery or pure javascript - here is how my code looks at this moment (in jquery):

var scrollingposition = 0;

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

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

Now how can i put this into some kind of while loop, so that #object is moving px by px for as #button is hovered, not just when the mouse enters it?

推荐答案

好的……又是一个答案:

OK... another stab at the answer:

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

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

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

The 250 means the task repeats every quarter of a second. You can decrease this number to make it faster or increase it to make it slower.

相关文章