CODEWITHSUNDEEP
jquerymouseovermouseout
Walrus
Walrus

Reputation: 20444

JQuery mouseover mouseout function dancing

The following function causes a box to open over a gallery on mouseover. The problem is that it won't stop trying to open and close. This is something to do with the mouseout function being triggered as the mouse moves around the picture.

Dammed infuriating. Any ideas on fixing it?

$(document).ready(function(){
 $("#gallery, .imageitem, #thumbnails, .thumbs, .cornerimg").mouseover(function(){
     $('#thumbnails').addClass('thumbnailshover');
 });
 $("#gallery").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });
});

Marvellous

Upvotes: 1

Views: 1719

Answers (5)

Willem
Willem

Reputation: 5404

mouseover and mouseout events may act buggy in many browsers because they trigger when leaving elements inside the element that has the handler. The jquery mouseenter and mouseleave events fix this (see demo at bottom of page).

Upvotes: 2

Alnitak
Alnitak

Reputation: 339816

You need to:

  1. use .hover() to correctly handle mouse in and mouse out events

  2. record the timer handle returned from setTimeout()

  3. call clearTimeout() with that handle at the start of every callback.

See a (simplified) demo at http://jsfiddle.net/alnitak/R7v4H/

Upvotes: 1

jefflunt
jefflunt

Reputation: 33954

I think you need to define mouseout on the #thumbnails id, instead, and that may just fix your issue.

What's happening is:

Your mouseover and mouseout events are defined on the same id, #gallery, which means when you hover over the #gallery the mouseover function will be called, BUT because your overlay is now covering the #gallery, your mouse is no longer "over" the #gallery, but it's over the #thumbnails, thereby triggering mouseout.

Upvotes: 0

Rudisimo
Rudisimo

Reputation: 342

Use mouseleave instead. The problem with mouseout is that it is triggered on certain browsers when you mouse over elements inside your container, in this case #gallery.

$('#gallery').mouseleave(function(){
    ...
});

Upvotes: 0

Chriszuma
Chriszuma

Reputation: 4557

Try adding the mouseout function to the thumbnailshover class instead of the #thumbnails object. Then it won't be until the mouse leaves the thumbnail that it goes away.

$(".thumbnailshover").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });

Upvotes: 0

Related Questions