Question

在下面的代码块中，我试图找到一种方法在特定时间后离开悬停状态（例如500ms）

<div id='a' style="border:2px solid black" >
  <h3>Hover</h3></br>
</div>
<div id="test" style="background-color:red">
  display
</div>

$(document).ready(function() {
  $("#test").hide();
  var delay = 200, setTimeoutConst;

  $('#a').hover(function() {
    setTimeoutConst = setTimeout(function() {
      $("#test").show();
    }, delay);
  }, function() {
    // execute here ONLY if 500ms have passed outside of the control being hovered
  })
})

感谢您的帮助

Answer 1

$(document).ready(function() {
  $("#test").hide();
  var delay = 200, setTimeoutConst;

  $('#a').hover(function() {
    //clear the timeout incase it was going to hide it
    clearTimeout(setTimeoutConst);
    setTimeoutConst = setTimeout(function() {
      $("#test").show();
    }, delay);
  }, function() {
    //clear the timeout incase it was going to show it again
    clearTimeout(setTimeoutConst);
    setTimeoutConst = setTimeout(function() {
      $("#test").hide();
    }, 500);
  })
})

Answer 2

setTimeout

＆＃13;

 
$(document).ready(function(){
     $("#test").hide();
   var delay=200, setTimeoutConst, myTime;
  
 $('#a').hover(function(){
        setTimeoutConst = setTimeout(function(){
           $("#test").show();
           //Here is the missign part. clearTimeout so the callback won't be executed. 
           clearTimeout(myTime); 
        }, delay);
   },function(){
   
   myTime=  setTimeout(function(){
      
       $("#test").hide( ); 
   }, 500);
        //execute here ONLY if 500ms has passed outside of the control being hovered
   })
   
   
   
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='a' style="border:2px solid black" >
<h3>Hover</h3>
</br>
</div>
<div id="test" style="background-color:red">
display
</div>

＆＃13;

仅在达到指定时间时才离开悬停状态

2 个答案: