JQuery fadeOut, когда мышь не перемещается

Question

У меня есть этот код jQuery, который fadeIn и fadeOut дочерний div на его родительском div hover. Я хочу, чтобы дочерний div исчезал после пяти секунд, если мышь все еще витает на родительском div, но мышь не движется. И если он снова начнет двигаться, снова появится дочерний 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» событие на родителя вместо продукта «зависания» событие. Смотрите код ниже:

$(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 
 
    \t  fadingIn = true 
 
    \t  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>