JQuery fadeOut, wenn die Maus nicht bewegt wird

Question

Ich habe diese jQuery-Code, fadeIn und fadeOut ein Kind Div auf seiner Eltern div . Ich möchte, dass die Child-Komponente nach fünf Sekunden ausgeblendet wird, wenn sich die Maus immer noch im Eltern-Div befindet, aber die Maus sich nicht bewegt. Und wenn es sich wieder bewegt, taucht das Kind wieder auf. Sie können ein Beispiel von dem, was ich in dieser kurzen 20sec video bedeuten: Hier wird die bisher mein Code:

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

Answer 1

Sie müssen mousemove Ereignis verwenden, um diese Arbeit zu tun. Wenn sich die Maus an einem Element bewegt, verwenden Sie fadeIn() und stellen Sie einen Timer unter Verwendung von setTimeout() ein. Im Timer und nach mehreren Sekunden verwenden Sie 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

Ein wahrscheinlicher besserer Ansatz ist es, das „mousemove-“ Ereignis auf dem Elternteil anstelle des dem „schweben“ -Ereignis zu verwenden. Sehen Sie den Code unten:

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