快速点击导航菜单导致多个 div 淡入

Question

我遇到了一个脚本问题（我第一次尝试使用 jQuery），我使用导航菜单编写了淡入 div。如果用户快速单击导航菜单上的不同按钮，则会将两个 div 加载到彼此之上。

代码如下：

$(document).ready(function(){

            $("#about-button").css({
                opacity: 0.3
            });
            $("#contact-button").css({
                opacity: 0.3
            });
            $("#friends-button").css({
                opacity: 0.3
            });
            $("#gallery-button").css({
                opacity: 0.3
            });
        $("#container div.button").click(function(){
                $clicked = $(this);
                if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
                {
                    $clicked.animate({
                        opacity: 1,
                    }, 600 );
                    var idToLoad = $clicked.attr("id").split('-');
                    $("#content").find("div:visible").fadeOut("slow", function(){
                        $(this).parent().find("#"+idToLoad[0]).fadeIn("slow")
                    })
                }
                $clicked.siblings(".button").animate({
                    opacity: 0.3,
                }, 600 );
            });
        });

这里是 div 和按钮的样式：

#container{
    width: 996px;
    height: 1050px;
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
    position: relative;
    background-position: center top;
    margin: 0px auto 0px auto;
}
#navbar {
    width: 150px;
    height: 300px;
    position: absolute;
    top: 250px;
    left: 100px;
    z-index: 2;
    visibility: visible;
}
#about {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none;
    overflow: auto;
}
#footer {
    top: 950px;
    height: 80px;
    position: absolute;
    color: #ffffff;
    padding: 10px;
    width: 988px;
    text-align: right;
}

#contact {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none;
}
#friends {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none
}
#gallery {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none;
}
#home {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:block;
    overflow: auto;
    padding-right: 10px;
}
#home-button {
    opacity: 1.0;
}
#about-button {
    opacity: 0.5;
}
#contact-button {
    opacity: 0.5;
}
#friends-button {
    opacity: 0.5;
}
#gallery-button {
    opacity: 0.5;
}
.button{
    cursor: pointer;
}
#header{
    top: 150px;
    position: absolute;
    left: 115px;
    visibility: visible;
    height: 100px;

HTML 标记应该是正确的，在任何内容区域内都没有子 div，而且我找不到其他冲突。

有没有一种方法可以在 div 为 :visible 之前禁用对菜单的点击？如果有人对此或其他修复有答案，我真的很想看到它！这是该网站迄今为止发现的唯一错误。

谢谢！

Answer 1

没有看到全貌，我可以在以下行中看到选择器的语法错误：

if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))

“非动画”的选择器应包含“：”，如下所示：

if($clicked.css("opacity") != "1" && $clicked.is(":not(:animated)"))

Answer 2

听起来你的 click 函数的第一个动作应该是解除所有 div 的 click 事件的绑定，最后一个动作应该是恢复监听器。

这样做的方法是把你的大部分代码放到它自己的函数中（你把它放在 $(document).ready(){} 之外）

类似的东西

$(document).ready(function(){
   $("#container div.button").click(makeVisible);

});

function makeVisible() {
    $("#container div.button").unbind(click);
      ///your code to make the div visible
    $("#container div.button").click(makeVisible);
}

Answer 3

由于动画需要排队，最好的方法是使用 stop() 方法使当前目标之外的所有其他动画 div 停止动画。有关详细信息，请参阅http://docs.jquery.com/Effects/stop#clearQueuegotoEnd 的文档。