Search code examples
jquerymouseovermouseout

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

Solution

  • 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/