Help needed with showing and hiding a div

Question

I'm having a problem with an image viewer I'm creating. Like the image below, the 'window' is where the image is shown and 'paging' is where the user can change the image. I've used this Jquery script to make the 'paging' fade in whenever the window is hovered over - It's hidden to start with. Although when the user hovers onto 'paging', it flickers. (Like shows then hides, etc.)

I suppose it's because the mouse isn't hovering over the 'window' anymore. Can anyone suggest how I can make 'paging' remain showing? Thanks for the help! :)

$(".window").hover(function() {
    $(".paging").fadeIn('fast');
}, function() {
    $(".paging").fadeOut('fast');
});

alt text

Nick Craver · Accepted Answer · 2010-12-29T21:56:43.230

3

You can use .stop() here and include both in your .hover() selector, like this:

$(".window, .paging").hover(function() {
    $(".paging").stop(true, true).fadeIn('fast');
}, function() {
    $(".paging").stop(true, true).fadeOut('fast');
});

This way, when you leave to enter the child or back to the parent it stops the fade out and brings it right back, resulting in no visible action to the user.

edited Dec 29 '10 at 21:56

answered Dec 29 '10 at 21:39

Nick Craver

623,446
136
1,297
1,155

Thanks! But it doesn't fade away. :( I mean, the 'paging' div doesn't fade away. Would it help if I uploaded a page with it on? – Joey Morani Dec 29 '10 at 21:56
@Joey - oops, that should still have been `.hover()` in there, try the updated answer. – Nick Craver Dec 29 '10 at 21:57
Ahh. That's much better! :D There's still a slight flicker though. Could anything be done about that? – Joey Morani Dec 29 '10 at 21:58
Okay. I've got it sorted now. Thanks again for the help! :) – Joey Morani Dec 29 '10 at 22:22

score 0 · Answer 2 · answered Dec 29 '10 at 21:34

0

You could try using mouseover and mouseout instead. I'm not sure that mouseout would react the same way hover does.

answered Dec 29 '10 at 21:34

NickAldwin

11,584
12
52
67

score 0 · Answer 3 · answered Dec 29 '10 at 21:43

In fact, when you pass your mouse over the paging there is a magical thing that happens which is called "event bubbling": the "hover" event is passed to the container which is the parent of the "hovered" object, and so on until the "document" object.

So to solve your problem, you need to stop bubling, you can do it with "return false":

$(".paging").hover(function() {
    return false;
}, function() {
    return false;
});

(It's possible that in recent version of jquery you can replace the argument function(){return false;} by just false.)

Help needed with showing and hiding a div

3 Answers3