Question

当没有鼠标移动时，此脚本淡出div“＃box1”。当光标在div“＃box1”上时，我试图强制它不淡出，如果在div之外没有鼠标移动，则继续淡出。我已经尝试了mouseover（）的if / else语句，但我似乎无法让它正常运行。

有人可以指点我如何找出我的愚蠢问题http://jsfiddle.net/YjC6y/2877/

谢天谢地

$(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

试试这个：这里是小提琴链接：jsfiddle.net/b04jsmkf

添加了：

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

完成功能：

        $(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

已修复，只需在#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)

});
});

不要在悬停时淡出

2 个答案: