如果鼠标超过2秒

如果鼠标超过2秒

本文介绍了如果鼠标超过2秒,然后显示其他不?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这里是一个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秒,然后显示其他不?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 12:26