Javascript while hovered loop

[Cool&Awesome]

Hi guys,

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 concrete example 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?

[Airshow]

C&A

Try this:

function scrollObj(cssAttr, delta, interval) {
		var $this = $(this);
		if($this.attr('allowScroll')) {
			var r = parseInt($this.css(cssAttr));
			$this.css(cssAttr, r+delta);
			var that = this;//capture "this" in closure for use in the timeout function.
			setTimeout(function(){scrollObj.call(that, cssAttr, delta, interval);}, interval);
		}
	}
	$('#button').hover(
		function() {//executes when the mouse pointer enters the element.
			var o = $('#object');
			o.attr('allowScroll', 1);//allow scroll
			scrollObj.call(o.get(0), "right", 1, 20);//initiate scroll establish scroll parameters.
		},
		function() {//executes when the mouse pointer leaves the element.
			$('#object').attr('allowScroll', 0);//disallow scroll
	});

By writing scrollObj this way, it is reusable - ie. you could have other buttons similarly acting on same/other object(s) without needing to write another worker function.

For example, this would scroll the object right:

$('#button2').hover(
		function() {//executes when the mouse pointer enters the element.
			var o = $('#object');
			o.attr('allowScroll', 1);//allow scroll
			scrollObj.call(o.get(0), "right", -1, 20);//initiate scroll establish scroll parameters.
		},
		function() {//executes when the mouse pointer leaves the element.
			$('#object').attr('allowScroll', 0);//disallow scroll
	});

Airshow

[Cool&Awesome]

Thanks Airshow, this works, but just for starting the scroll, when I "hover-out" it keeps scrolling instead of stopping, do you know why this happens?

[Airshow]

C&A,

I did limited testing in IE and everything worked fine. Just tested in latest FF and that's fine too.

It's just occurred to me that the motion you're after can be achieved with jQuery .animate(), though we still need to use .hover() to start/stop the action.

Try this:

$('#button').hover(
		function() {
			$('#object').animate({right:'600px'}, 5000);//600px is the target value at which the animation will stop. 5000 is the time in ms to complete the animation. Adjust both to suit. 
		},
		function() {
			$('#object').stop();
		}
	);

If it still fails to stop on mouseout, then put an alert in the second function to check that it fires.

Airshow