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为：可见？如果有人对此或其他修复有答案，我真的很想看到它！这是迄今为止该网站发现的唯一错误。

谢谢！

Answer 1

如果没有看到完整的图片，我可以在以下行中看到选择器的语法错误：

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

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

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

Answer 2

听起来你的点击功能的第一个动作应该是解除所有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上的文档。

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

3 个答案: