Question

我有这个jQuery代码fadeIn和fadeOut一个孩子在它的父div hover上。如果鼠标仍悬停在父div上但鼠标没有移动，我希望5秒后子div为fadeOut。如果它再次开始移动，则子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

更好的方法是使用＆＃34; mousemove＆＃34;父母的事件而不是＆＃34; hover＆＃34;事件。请参阅以下代码：

＆＃13;

$(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
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

当鼠标移动时，JQuery fadeOut

2 个答案: