[英]jquery menu slideshow verify hover function
I have been trying to tune up a menu slideshow and have part of my code shown below which I have for each of the 4 items in the menu respectively. 我一直在尝试调整菜单幻灯片,并在下面显示我的代码的一部分,分别对菜单中的4个项目分别进行操作。 I made it so if you move your cursor over a given menu item the corresponding div is shown in the display.
我这样做的目的是,如果将光标移到给定的菜单项上,则相应的div将显示在显示屏中。 I also added a timeout so if you moved from one menu item to another quickly it doesn't switch from one div to another very quickly.
我还添加了一个超时,因此,如果您快速从一个菜单项移到另一个菜单项,它不会很快从一个div切换到另一个div。 The question I have now to make it work exactly as desired is
how do I make it so that it checks whether the cursor is still hovering over a given menu item after 200 milliseconds for example before switching to that menu item?
现在,我要使其完全按要求工作的问题是如何使它能够检查光标是否在200毫秒后仍停留在给定菜单项上,例如在切换到该菜单项之前? Any comments or help is appreciated.
任何意见或帮助表示赞赏。 Thanks.
谢谢。
$("div#menu .reps").hover(function() {
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout(hoverFunctionReps, 280);
});
function hoverFunctionReps(){
if(current_slide != "reps"){
$(".arrow").animate({"left":"135px"});
if(current_slide == "clients"){
$(".clients_display").stop(true,true).fadeOut().hide();
$(".reps_display").fadeIn().show();
current_slide = "reps";
}
else if(current_slide == "services"){
$(".services_display").stop(true,true).fadeOut().hide();
$(".reps_display").fadeIn().show();
current_slide = "reps";
}
else{
$(".training_display").stop(true,true).fadeOut().hide();
$(".reps_display").fadeIn().show();
current_slide = "reps";
}
}
}
Perhaps something like this: 也许是这样的:
http://jsfiddle.net/lucuma/ZgNKG/ http://jsfiddle.net/lucuma/ZgNKG/
var timeoutID; var timeoutID;
$(document).ready(function() {
$("a").hover(function() {
window.clearTimeout(timeoutID);
$(this).data('hashover', '1');
var that = this;
timeoutID=window.setTimeout(
(function() {
hoverFunctionReps(that);
}), 280);
}, function() {
$('span', this).hide();
$(this).data('hashover', '0');
});
function hoverFunctionReps(me) {
if ($(me).data('hashover') == '1') {
$('span', me).show();
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.