本文介绍了如果鼠标超过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');
}
});
这篇关于如果鼠标超过2秒,然后显示其他不?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-12 12:26