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?

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?

• javascript
• jquery
• hover

• Archive purpose: Selected answer here was what I needed stackoverflow.com/questions/3966273/… – leticia Commented Mar 13, 2014 at 20:21

5 Answers 5

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.

Nathan's answer is a good start, but you should also use window.clearInterval when the mouse leaves the element (mouseleave event) to cancel the repeated action which was set up using setInterval(), because this way the "loop" is running only when the mouse pointer enters the element (mouseover event).

Here is a sample code:

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

  });

I created a sample code on jsFiddle which demonstrates how to scroll the background-image of an element left-to-right and then backwards on hover with the code shown above:

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

If its an animation you can "stop" an animation half way through. So it looks like you're moving something to the left so you could do:

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

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

If you want to do this for multiple objects, it might be better to make it a bit more object oriented than a global variable though.

Edit: Think the best way of dealing with multiple objects is to put it in an .each() block:

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

Edit2: Or you could do it by adding a class:

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

var scrollingposition = 0;

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