Do not fadeOut on Hover

Question

This script fades out the div "#box1" when there is no mouse movement. I am trying to force this to NOT fade out when the cursor is over the div "#box1" and continue fading out if there is no mouse movement outside of the div. I have tried if/else statements for mouseover() but I can't seem to get it to function correctly.

Could someone please point me toward how to figure out my silly question http://jsfiddle.net/YjC6y/2877/

Thank you kindly

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                console.log("clearTimer");
                clearTimeout(timer);
                timer = 0;
            }

            console.log("fadeIn");
            $('#box1').fadeIn();
            $('html').css({
                cursor: ''
            });
        } else {
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            console.log("fadeout");
            $('#box1').fadeOut()
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }, 1500)
    });
});

Answer 1

Try this: here is the fiddle link:jsfiddle.net/b04jsmkf

Added:

if (!$('#box1').is(':hover')) {

Complete function:

        $(function () {
            var timer;
            var fadeInBuffer = false;
            $(document).mousemove(function () {
                if (!fadeInBuffer) {
                    if (timer) {
                        console.log("clearTimer");
                        clearTimeout(timer);
                        timer = 0;
                    }

                        console.log("fadeIn");
                    $('#box1').fadeIn();
                    $('html').css({
                        cursor: ''
                    });
                } else {
                    fadeInBuffer = false;
                }


                timer = setTimeout(function () {
                    console.log("fadeout");
                    if (!$('#box1').is(':hover')) {
                        $('#box1').fadeOut()
                        $('html').css({
                            cursor: 'none'
                        });
                        fadeInBuffer = true;
                    }
                }, 1500)
            });
        });

Answer 2

fixed, just added a mousemove check on #box.

$(function () {

var timer;
var isOnBox = false;
var fadeInBuffer = false;



$("#box1").mouseenter(function(){;
    isOnBox = true;
}).mouseleave(function(){
    isOnBox = false;
});


$(document).mousemove(function () {
    if (!fadeInBuffer) {
        if (timer) {
            console.log("clearTimer");
            clearTimeout(timer);
            timer = 0;
        }
        console.log("fadeIn");
        $('#box1').fadeIn();
        $('html').css({
            cursor: ''
        });
    } else {
        fadeInBuffer = false;
    }

    timer = setTimeout(function () {
        console.log(isOnBox);
        if(isOnBox==false){
            console.log("fadeout");
            $('#box1').fadeOut()
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }
    }, 1500)

});
});