jQuery Hover Looping Problem

JavaScript
1

Hello All,

I have a task which I can’t quite figure out and need a pro to take a look at. I came across this great jQuery tutorial from “webdesignerwall” jQuery For Designers, under tutorials. This is an example of a simple jQuery function in which you hover over a button and a tool tip pops up. This part is pretty simple, and effective. The only problem is that if you repeataly hover over the button say 10x, the box hovers ten times even when mouse is off. What I want it to do is stop after you mouse off the button, and stop looping the animation. If you could help that would be great, thanks.

-SS

2

Can you post the code you used?

jQuery will queue up animations by default, you can empty the queue (stopping the animation ‘loop’) by applying $(elem).stop() to the element in question.

3

Here is the jQuery code:

$(document).ready(function() {
$(‘#box > ul’).tabs({ fx: {
height: ‘toggle’,
opacity: ‘toggle’ } });

});
$(document).ready(function(){

$("em").animate({
		opacity: .8
  });					

$("#box li a").mouseover(function() {	
	$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	return false;
});
$("#box li a").mouseout(function() {
	$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	return false;
  });

});

4

Try the suggestion from Jimmy by putting it at the start of the mouseout function.


$("#box li a").mouseout(function() {
    $(this).next("em").stop();
    $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
    return false;
});
5

Yeah that doesn’t seem to work, but thank you… It just stops the animation at the hover position and never returns. Not too sure whats going on here.

-SS

6

Here is the documentation page for the stop method.
http://docs.jquery.com/Effects/stop

I’ve been playing around with the animated hover demo code and the following code appears to provide a good balance.


$(".menu a").hover(function() {
	$(this).next("em")
		.stop(true, true)
		.animate({opacity: "show", top: "-75"}, "slow");
}, function() {
	$(this).next("em")
		.animate({opacity: "hide", top: "-85"}, "fast");
});