0

そのため、クリックすると開閉する 3 つの div があります。他の2つを閉じたまま、クリックしたdivを同時に開きたい。別のものをクリックすると、そのものが開き、他のものは元のサイズに閉じます。

現在、機能はほとんど機能しています。それらは適切に開閉し、画像が 100 x 100 の場合、クリックすると消えます。これは良いことです。ただし、画像が非表示にならず、かなりグロスに見える場合があります。なぜこれが起こるのか理解できないようです。hide() をスキップして animate に直行するようなものです。firebug エラーはスローされないので、少し困惑しています。ヘルプ？これがコードスニペットです。また、めちゃくちゃになったときにどのように見えるかへのリンク。

リンク: http://i.imgur.com/eJ2QdiI.png

コード: (これは大まかな草案ですので、気をつけてください :)。仕事環境から離れて楽しみのために何かをコーディングするのはこれが初めてなので、ヒントも役に立ちます!)

忍者の編集: 私は、delay() を使用することと、delay() を使用しないことの両方を極端に試みましたが、まったく役に立たないようです。:(

        function openDiv(divPosition) {
            if(divPosition == "top") {
                $("#home, #midDivContent, #botDivContent").hide().delay(1000);
                $("#topDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#midDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#botDiv").animate({"height": "100px", "width": "100px"}, "slow", function() {$("#contactMe, #aboutMe").show();$("#topDivContent").fadeIn("fast");});
            } else if (divPosition == "mid") {
                $("#aboutMe, #topDivContent, #botDivContent").hide().delay(1000);
                $("#midDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#topDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#botDiv").animate({"height": "100px", "width": "100px"}, "slow",function() { $("#home, #contactMe").show();$("#midDivContent").fadeIn("fast");});
            } else if (divPosition == "bot") {
                $("#contactMe, #topDivContent, #midDivContent").hide().delay(1000);
                $("#botDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#topDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#midDiv").animate({"height": "100px", "width": "100px"}, "slow",function() { $("#home,#aboutMe").show();$("#botDivContent").fadeIn("fast");});
            }
        }
4

1 に答える 1

1

アニメーションを遅らせるには、その特定の要素でアニメーションを遅らせる必要があります。

$("#home, #midDivContent, #botDivContent").hide().delay(1000)セレクター内の要素は既に非表示になっているため、コードを遅らせる必要はありません。

または、そうした場合、$("#home, #midDivContent, #botDivContent").delay(1000).hide();これらの 3 つの div を非表示にする前に 1 秒待機します。必要なのは、次の一連の要素のアニメーションを遅らせることです。次のようにします。

$("#topDiv").delay(1000).animate({"height": "500px", "width": "950px"}, "slow");

などなど、遅延させたいアニメーションごとに。

また、コールバックを使用できることも注目に値します。別の要素のアニメーションが終了した後に実行するアニメーションは、最初の要素のアニメーション関数のコールバックに配置できます。

$("#home, #midDivContent, #botDivContent").delay(1000).hide(function(){
    $("#topDiv").animate({"height": "500px", "width": "950px"}, "slow");
});

$("#topDiv").delay(1000)...ここでは特に、非表示のタイミングを OR 指定することをお勧めします: int なし.hide(500, function()...で渡すhide()と瞬時になります。

于 2013-03-26T04:59:29.240 に答える