...

View Full Version : jQuery hover problem, seeing two divs at once



Left_blank
08-18-2010, 09:05 PM
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
08-18-2010, 09:24 PM
try this instead

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

Left_blank
08-18-2010, 09:55 PM
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
08-18-2010, 11:48 PM
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
08-19-2010, 12:35 PM
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
08-19-2010, 12:44 PM
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
08-19-2010, 01:04 PM
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
08-19-2010, 01:30 PM
@ 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
08-19-2010, 02:27 PM
This plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html) looks like it might help you out.

Left_blank
08-19-2010, 02:56 PM
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
08-19-2010, 03:16 PM
Yep that works perfectly SB. Excellent find. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum