Javascript jquery菜单幻灯片显示错误
我目前正在制作一个网站,其中包含一个菜单导航,几乎与在only上找到的相同,而不是向下指向上。无论如何,我使用jquery/javascript为菜单编写了代码,它可以工作,但是在fotopunch站点上也出现了一个小错误。当您将光标从一个菜单项移动到另一个菜单项并反复移动时,会暂时扰乱显示。有办法解决这个问题吗?我将包括我的javascript文件的一部分,以便您可以看到我为每个菜单项做了什么Javascript jquery菜单幻灯片显示错误,javascript,jquery,menu,settimeout,Javascript,Jquery,Menu,Settimeout,我目前正在制作一个网站,其中包含一个菜单导航,几乎与在only上找到的相同,而不是向下指向上。无论如何,我使用jquery/javascript为菜单编写了代码,它可以工作,但是在fotopunch站点上也出现了一个小错误。当您将光标从一个菜单项移动到另一个菜单项并反复移动时,会暂时扰乱显示。有办法解决这个问题吗?我将包括我的javascript文件的一部分,以便您可以看到我为每个菜单项做了什么 $("div#menu .reps").hover(function() { //if th
$("div#menu .reps").hover(function() {
//if the current slide is not reps
if(current_slide != "reps"){
//move the arrow to the corresponding position for the reps slide
$(".arrow").animate({"left":"135px"});//move the arrow
//(test which slide it is.)
if(current_slide == "clients"){
//fade out & hide the current slide
$(".clients_display").fadeOut().hide();//hide the current slide
//show the reps slide & fade in
$(".reps_display").fadeIn().show();//show the slide
//the current slide is the reps slide
current_slide = "reps";
}
else if(current_slide == "services"){
//fade out & hide the current slide
$(".services_display").fadeOut().hide();//hide the current slide
//show the reps slide & fade in
$(".reps_display").fadeIn().show();//show the slide
//the current slide is the reps slide
current_slide = "reps";
}
else{
//fade out & hide the current slide
$(".training_display").fadeOut().hide();//hide the current slide
//show the reps slide & fade in
$(".reps_display").fadeIn().show();//show the slide
//the current slide is the reps slide
current_slide = "reps";
}
}
});
我对每个菜单项都这样做(共有4个)。我认为问题是当它淡出和淡入时,因为如果它试图在同一时间做太多的事情,它会同时显示两个菜单div。我试图添加超时,但未成功。修复此错误的最佳方法是什么?它足够小,不会是一个大的优先事项,但它会更好地工作。谢谢。你试过了吗?很好。停止功能可以解决这个问题。但箭头在来回移动时仍然滞后。
if(current_slide == "clients"){
$(".clients_display")stop(true, true).fadeOut().hide();
$(".reps_display").stop(true, true).fadeIn().show();
current_slide = "reps";
} else if(current_slide == "services"){
$(".services_display").stop(true, true).fadeOut().hide();
$(".reps_display").stop(true, true).fadeIn().show();
current_slide = "reps";
} else{
$(".training_display").stop(true, true).fadeOut().hide();//hide the current slide
$(".reps_display").stop(true, true).fadeIn().show();//show the slide
}