如果鼠标超过2秒，然后显示其他不？ [英] If mouse over for over 2 seconds then show else dont?

问题描述

这里是一个jQuery滑块函数，我已经应用到悬浮的div，以滑动按钮。

它工作正常，除了现在每当有人移进和移出，它保持上下波动。

我想，如果我把一个或两秒的延迟定时器，它会更有意义。

我如何修改函数以仅在用户在div上超过一秒或两秒才运行幻灯片？

 < script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.min.js> ; / script> 
< script type =text / javascript> 
 
 $（＃NewsStrip）。hover（
 function（）{
 $（＃SeeAllEvents）。slideDown（'slow'）;}，
 function（）{
 $（＃SeeAllEvents）。slideUp（'slow'）; 
}）; 
 
< / script>感谢
解决方案   div> 
您需要在鼠标悬停时设置计时器，并在幻灯片激活或鼠标悬停时（以先到者为准）将其清除。
  var timeoutId; 
 $（＃NewsStrip）hover（function（）{
 if（！timeoutId）{
 timeoutId = window.setTimeout（function（）{
 timeoutId = null; // EDIT：added this line 
 $（＃SeeAllEvents）。slideDown（'slow'）; 
}，2000）; 
} 
}，
 function（）{
 if（timeoutId）{
 window.clearTimeout（timeoutId）; 
 timeoutId = null; 
} 
 else {
 $ #SeeAllEvents）。slideUp（'slow'）; 
} 
}）; 
  
  查看此操作。  
 
Here is a jQuery slide function I have applied to a div on hover in order to slide a button down. 

It works fine except that now everytime someone moves in and out of it, it keeps bobbing up and down. 

I figured if I put a one or two second delay timer on it it would make more sense. 

How would I modify the function to run the slide down only if the user is on the div for over a second or two??
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
<script type="text/javascript">

$("#NewsStrip").hover(
function () {
    $("#SeeAllEvents").slideDown('slow');    },
function () {
    $("#SeeAllEvents").slideUp('slow');
});

</script>
Thanks
解决方案
You need to set a timer on mouseover and clear it either when the slide is activated or on mouseout, whichever occurs first:
var timeoutId;
$("#NewsStrip").hover(function() {
    if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
            timeoutId = null; // EDIT: added this line
            $("#SeeAllEvents").slideDown('slow');
       }, 2000);
    }
},
function () {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
    }
    else {
       $("#SeeAllEvents").slideUp('slow');
    }
});
See it in action.

                        
这篇关于如果鼠标超过2秒，然后显示其他不？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！