9

I have a div called "#top". I would like it to fade out when the mouse is idle for 3 seconds. When the mouse moves again, make it appear (fade, of course)

Does anyone know how to do this?

Thanks a lot.

1 Answer 1

22

Use setTimeout, saving the return value somewhere (to cancel it with clearTimeout when the mouse moves again):

var timer;
$(document).mousemove(function() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }

    $('#top:visible').fadeIn();
    timer = setTimeout(function() {
        $('#top').fadeOut()
    }, 3000)
})

You'll want this inside $(document).ready() or the like.

1
  • This seems to sort of work for me, but it doesn't fade, and the element doesn't reappear on mouse move.
    – rpivovar
    May 19, 2017 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.