0

ナビゲーションメニューを使用してdivをフェードインするために作成したスクリプト（jQueryでの最初の試行）に問題があります。ユーザーがナビゲーションメニューのさまざまなボタンをすばやくクリックすると、両方の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になるまでメニューのクリックを無効にする方法はありますか？誰かがそれまたは別の修正に対する答えを持っているなら、私は本当にそれを見たいです！これは、サイトでこれまでに見つかった唯一のバグです。

ありがとう！

4

3 に答える 3

1

全体像を見ずに、次の行にセレクターの構文エラーが表示されます。

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

「アニメーション化されていない」のセレクターには、次のように「：」を含める必要があります。

if($clicked.css("opacity") != "1" && $clicked.is(":not(:animated)"))
于 2009-05-25T19:14:24.437 に答える
0

クリック関数の最初の行為は、すべての 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);
}
于 2009-05-27T22:16:23.757 に答える
0

アニメーションはキューに入れられるため、stop() メソッドを使用して、現在ターゲットになっている div 以外のすべてのアニメーション化された div のアニメーション化を停止するのが最善の方法です。詳細については、 http://docs.jquery.com/Effects/stop#clearQueuegotoEndのドキュメントを参照してください。

于 2009-05-28T02:33:11.193 に答える