jQuery hover problem, seeing two divs at once

[Left_blank]

My basic set up is that I have some divs which I want to fade in and out when the user hovers over an image.

<div id="DefaultHint" >The default hint is in here, shown initially</div>
<div id="PPHint" style="display:none" >There is a different hint here, hidden initially</div>

Here is the code I have so far:

$('#QmarkCOP').hover(
function(event){
$('#DefaultHint').fadeOut('fast', function(){
$('#PPHint').fadeIn('fast');
})
},
function(event){
$('#PPHint').fadeOut('fast', function(){
$('#DefaultHint').fadeIn('fast');
});
}
);

Now this works ok except for when I move in and out of the image (QmarkCOP) too fast. Then I see both hints at once.

Any ideas how I can prevent this from happening?

Thanks for any help.

[iamjerson]

try this instead

$('#QmarkCOP').hover(
function(){
$('#DefaultHint').fadeOut('fast');
$('#PPHint').fadeIn('fast');
},
function(){
$('#DefaultHint').fadeIn('fast');
$('#PPHint').fadeOut('fast');
}
);

[Left_blank]

Nope, that makes it a little different but now I see both hints at once for a millisecond on the transition as well as when I hover in and out too fast!

[iamjerson]

Originally Posted by Left_blank

Nope, that makes it a little different but now I see both hints at once for a millisecond on the transition as well as when I hover in and out too fast!

because your making it to fadeIn Fadeout fast make it.. fadeIn('slow'); and fadeOut('slow')

[SB65]

I suspect the problem with your original code is because when you move the mouse in and out quickly, the hoverIn fade has not completed before the hoverOut fade starts - resulting in both divs being visible.

Adding stop() as below seems to cure the problem.

$('#QmarkCOP').hover(
function(){
$('#PPHint').stop('true','true');
$('#DefaultHint').fadeOut('fast', function(){
$('#PPHint').fadeIn('fast');
})
},
function(){
$('#DefaultHint').stop('true','true');
$('#PPHint').fadeOut('fast', function(){
$('#DefaultHint').fadeIn('fast');
});
}
)

Interested in any alternative solutions.

[Left_blank]

Edit: I got ninja replied on by SB65. This post is supposed to go just above his!


That doesn't fix it either I'm afraid. The problem is that there's nothing preventing the mouseout function from running at the same time as the mousein function when I move the mouse in and out of the image quickly. When both functions run at the same time, I see both hints at the same time.

So what I think I need to do is check if the mousein function is finished before I run the mouseout function somehow?

[many_tentacles]

not sure of exactly how the code would go, but i'd suggest using .mouseenter or .mouseover rather than .hover. Not sure which one though...

Take a look at this:
http://api.jquery.com/mouseover/

[Left_blank]

@ SB65,

That does ease the problem somewhat but it doesn't eradicate it. When I flash the cursor back and forth over the image quickly I still see both divs at once sometimes. There are also instances of the functions being queued up in memory so if I flash over a lot of times and then move the mouse away there is still animations going on.

I'd guess I can add some sort of timer to the function so that nothing happens unless there is hover for a certain length of milliseconds. I'll try that and let you know how I get on.

Thanks.

[SB65]

This plugin looks like it might help you out.

[Left_blank]

That looks like exactly what I'm looking for. I'll have a play around with it now in a minute.

Thus is as close as I got myself.

function doFade(fadeoutfield, fadeinfield){ //2
		$(fadeoutfield).fadeOut('fast', function(){ //1
			$(fadeinfield).fadeIn('fast');
		}) //1
	}

$('#QmarkCOP').mouseenter(function(event){
		TimerId = setTimeout ( "doFade('#DefaultHint', '#PPHint')", 500 )
	});
	
	$('#QmarkCOP').mouseleave(function(event){
		$('#DefaultHint').stop('true','true');
		if($('#PPHint').is(":visible")){
			doFade('#PPHint', '#DefaultHint')
		}
		else {
			clearTimeout(TimerId)
		}
	});

It's pretty hard to break this one unless you really try but it's not a perfect solution.

[Left_blank]

Yep that works perfectly SB. Excellent find. Thanks.