Question

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.

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);
    });

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?

Answer 1

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;
    }
  );
});

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.