複数のdivのfadeInを引き起こすnavメニューの高速クリック

Question

スクリプトに問題があります（jQueryで初めて試しました）。navメニューを使用して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(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

よう

何か（あなたは$（ドキュメント）.ready（）{}の外に置かれた）独自の機能にあなたのコードのほとんどを置くことです

アニメーションがキューに入れられるので、stop（）メソッドを使用して、現在ターゲットとされている他のアニメーションdivをアニメーション化を停止させることをお勧めします。詳細はhttp://docs.jquery.com/Effects/stop#clearQueuegotoEndのドキュメントを参照してください。