Javascript "while hovered" loop

Question

Can someone help me on this ... I have a button that, when it freezes, triggers an action. But I would like for him to repeat it until the button hangs.

I would appreciate any solution, whether in jquery or pure javascript - this is what my code looks like at this moment (in jquery):

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

Now, how can I put this in some kind of while loop, so that the # object moves the px along the px since the #botton freezes, and not just when the mouse enters it?

Answer 1

OK ... one more blow in reply:

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

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

Answer 2

Nathan's answer is a good start, but you should also use window.clearInterval when the mouse leaves the element ( mouseleave event) to undo the repeated action that was set using setInterval () , since this loop only works when the mouse pointer enters element ( mouseover ).

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 that demonstrates how to scroll the background image of an element from left to right and then back to hover using the code shown above:

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

Answer 3

If its animation, you can “stop” the animation by half. So it looks like you are moving something to the left so you can:

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

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

Edit: Think that the best way to deal with multiple objects is to put it in a .each () block:

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

Edit2 : Or you can do this by adding a class:

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