Javascript 让一个框在鼠标静止时淡出，在鼠标移动时淡入_Javascript_Jquery_Html_Css

Javascript 让一个框在鼠标静止时淡出，在鼠标移动时淡入

javascript jquery html css

Javascript 让一个框在鼠标静止时淡出，在鼠标移动时淡入,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直很难让这个基本代码正确运行。我已经找到了解决方案，但我想我缺乏实现它们所需的知识，因为我仍然无法在鼠标静止时让愚蠢的盒子褪色。在此方面的任何帮助都将不胜感激，以下是我的简明代码： <!DOCTYPE html> <html> <head> <style> #box { height: 100px; width: 100px;

我一直很难让这个基本代码正确运行。我已经找到了解决方案，但我想我缺乏实现它们所需的知识，因为我仍然无法在鼠标静止时让愚蠢的盒子褪色。在此方面的任何帮助都将不胜感激，以下是我的简明代码：

<!DOCTYPE html>
    <html>
    <head>
        <style>
        #box {
            height: 100px;
            width: 100px;
            background-color: green;
        }
        </style>
        <script>
        var fadeout = null;
        $(document).mousemove(function() {
        $("#box").stop().fadeIn("slow");
        if (fadeout != null) {
            clearTimeout(fadeout);
        }
        fadeout = setTimeout(hide_playlist, 3000);
    });
        function hide_playlist() {
        $("#box").stop().fadeOut("slow");
    }</script>

    <title>Page Title</title>
    </head>

    <body>
    <div id="box"></div>
    <h1>Why wont you work.</h1>
    </body>
    </html>


#盒子{
高度：100px；
宽度：100px；
背景颜色：绿色；
}
var衰减=零；
$（文档）.mousemove（函数（）{
$（“#box”）.stop（）.fadeIn（“慢”）；
如果（衰减！=null）{
清除超时（淡出）；
}
淡出=设置超时（隐藏播放列表，3000）；
});
函数hide_playlist（）{
$（“#框”）.stop（）.fadeOut（“slow”）；
}
页面标题
你为什么不工作。

您应该尝试使用带有不透明度转换的

mouseenter

和

mouseleave

下面是我的JSFIDLE示例：

首先，确保在脚本之前在文件中引用jquery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

让一个框在鼠标静止时淡入，在鼠标移动时淡入

这一点还不清楚-你到底想发生什么？哎呀，很抱歉。我不小心打错了，谢谢你指出！令人惊叹的！谢谢！我非常感谢你的时间。啊，谢谢你的解释，我很感激。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

var fadeout = null;
    $(document).mousemove(function() {
        $("#box").stop().fadeIn("slow");
        if (fadeout != null) {
            clearTimeout(fadeout);
            fadeout = setTimeout(hide_playlist, 3000); //added this line!
        }
        fadeout = setTimeout(hide_playlist, 3000);
    });

    function hide_playlist() {
    $("#box").stop().fadeOut("slow");
    }