Question

I have an element I want to be shown whenever the cursor is moved anywhere on the page, and hidden again after a period of cursor inactivity (unless the cursor is hovering on said element).

This is the closest I’ve gotten, the problem being that when hiding the element the animation is played over and over (and over) again, for every pixel moved over. I thought .stop() might be the answer, but if it is I can’t figure out how.

bkLib.onDomLoaded(function() {

setTimeout(function() {
    $("#footer").hide('blind', 500)
}, 5000);

$('html').mousemove(function() {
    if($("#footer").is(':hidden')) {
        $("#footer").show('blind', 500);
    }

    if($("#footer").is(':visible') && !$("#footer").is(':hover')) {
        setTimeout(function() {
            $("#footer").hide('blind', 500);
        }, 5000);
    }
});

});

Answer 1

Try clearing your timeout before setting another one:

bkLib.onDomLoaded(function() {

var timeoutID = setTimeout(function() {
    $("#footer").hide('blind', 500)
}, 5000);

$('html').mousemove(function() {
    if($("#footer").is(':hidden')) {
        $("#footer").show('blind', 500);
    }

    if($("#footer").is(':visible') && !$("#footer").is(':hover')) {
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function() {
            $("#footer").hide('blind', 500);
        }, 5000);
    }
});

});