JQuery鼠标不动时淡出

Question

我有这个 jQuery 代码 fadeIn 和 fadeOut 一个 child div parent div hover。如果鼠标仍在 parent div 上悬停但鼠标没有移动，我希望 child div 在五秒后淡出。如果它再次开始移动，child div 会再次出现。您可以在这篇短文中看到我的意思的示例 20sec video：这是我目前的代码：

$(document).ready(function(){
    $("#parent_div").hover(function(){
        $("#child_div").fadeIn(500);
    },
    function(){
        $("#child_div").fadeOut(500);   
    });
});

Answer 1

您需要使用 mousemove 事件来完成这项工作。当鼠标在元素上移动时，使用 fadeIn() 并使用 setTimeout() 设置计时器。在计时器中和多秒后使用 fadeOut().

var timer;
$("#parent").mousemove(function(){
    clearInterval(timer);
    $("#child").fadeIn(500);
    timer = setTimeout(function(){
        $("#child").fadeOut(500);   
    }, 2000);  
}).mouseleave(function(){
    $("#child").fadeOut(500);
});

#parent {
    width: 100px;
    height: 100px;
    border: 1px solid black;    
}

#child {
    width: 100%;
    height: 100%;
    background: green;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
    <div id="child"></div>
</div>

Answer 2

一种可能更好的方法是在父级上使用 "mousemove" 事件而不是 "hover" 事件。请看下面的代码：

$(document).ready(function(){
    var childDiv = $("#child_div").hide() // start with the child hidden
      , throttle
      , fadingIn

    $("#parent_div").mousemove(function(event){
        clearTimeout(throttle) // clear the previous 5 second clock

        if (!fadingIn) { // don't runfadeIn() while the element is fading in
         fadingIn = true
         childDiv.stop(true).fadeIn(500, function () {
                fadingIn = false
            });
        }

        throttle = setTimeout(function () { // create a timer to fade out child
            childDiv.fadeOut(500);
        }, 5000) // wait 5 seconds (5000 milliseconds) until it fades out the child
    });
});

#parent_div {
    width: 100px;
    height: 100px;
    background: #aaa;
    padding: 50px
}

#child_div {
    width: 100px;
    height: 100px;
    background: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent_div">
    <div id="child_div"></div>
</div>

JQuery鼠标不动时淡出

JQuery fadeOut when the mouse is not moved

jquery

hover