Быстрое нажатие на навигационное меню вызывает исчезновение нескольких делений

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 );
            });
        });

Вот стили для кнопок и кнопок:

#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 не станет видимым? Если у кого-то есть ответ на то или иное исправление, я бы очень хотел его увидеть! это единственная ошибка, которая была обнаружена на сайте.

Спасибо!

Answer 1

Не видя полной картинки, я вижу синтаксическую ошибку для селектора в следующей строке:

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

Селектор «не анимированный» должен включать «:» следующим образом:

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

Answer 2

Так как анимации ставятся в очередь, лучшим подходом будет использование метода stop (), чтобы все другие анимированные div, кроме целевого в данный момент, перестали анимироваться. См. Документацию на http://docs.jquery.com/Effects/stop#clearQueuegotoEnd для получения дополнительной информации.

Answer 3

Похоже, что первым действием вашей функции щелчка должно быть отключение события щелчка от всех элементов div, а последним действием должно быть восстановление слушателя.

Способ сделать это состоит в том, чтобы поместить большую часть вашего кода в свою собственную функцию (которую вы помещаете вне $ (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);
}