j查询菜单幻灯片错误

jquery menu slideshow error

本文关键字：错误 幻灯片 菜单 查询      更新时间：2023-09-26

我目前正在制作一个网站，其中包含一个菜单导航，该菜单导航几乎与在 fotopunch.com 找到的菜单导航相同，而不是指向上方。无论如何，我使用jquery/javascript为菜单编写了代码，它可以工作，但是在Fotopunch站点上也发生了一个小错误。当您将光标从一个菜单项移动到另一个菜单项并反复返回时，它会暂时弄乱显示。有没有办法解决这个问题？我将包含我的javascript文件的一部分，以便您可以看到我为每个菜单项做了什么。

$("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 个）。我认为问题是当它淡出并淡入时，因为如果它试图同时做太多事情，它会同时显示 2 个菜单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
         }
相关文章：