Question

I need a div(#thumbnails) to show and hide when the mouse hovers on div(#sliderBox). For that I used the hoverIntent plugin and worked like a charm.

I also want the div(#thumbnails) to fadeOut when idle for 5 secs. I managed to make it work using setTimeout();

My problem is: If I stay idle on top of the #sliderBox div the #thumbnails div won’t fadeIn when I move the mouse again. I have to get my mouse cursor out of the #sliderBox div and hover back on it again to make the #thumbnails div fadeIn again.

Is there any way to fix this?

This is my code:

$(document).ready(function() {

$("#thumbnails").hide();

$("#sliderBox").hoverIntent(showThumbs, hideThumbs);

  var timer;

  $(document).mousemove(function() {

        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }

        timer = setTimeout(function() {
            $('#thumbnails').fadeOut(1000)
            }, 5000)
   });


 });

    function showThumbs(){ $("#thumbnails").fadeIn(1000);}
    function hideThumbs(){ $("#thumbnails").fadeOut(800);}

Answer 1

The issue lies with the plugin, which fires on mouseenter, so will not fire until you leave and enter again. The only solution is to modify the plugin itself, to trigger on mouseenter or mousemove (only after delay). The plugin looks pretty simple, and well commented. I don’t think it will be too hard to modify.

Good luck and godspeed!