1

私は.animateこのページ全体でjQueryを使用していますが、ユーザーがメッセージをクリックした後にユーザーに「目標完了」メッセージを非表示にするこの1行を除いて、すべてが非常にうまく機能します. 謎はアニメーションコマンドの連鎖にありますが、関数全体を含めています。私は.animate()優雅なものに使用していますが、オブジェクトがユーザーの視界から外れると、すばやく汚れ.css()ます...何を微調整しても、この1つのdivは長い遅延が経過するまでアニメーション化されないようです。 ..

私がすでに試したこと：

1) jQuery コマンドのチェーンを一度に 1 つずつ分離: --> 結果: すべてのアニメーションが同時に実行されますが、最初のアニメーションは実行前に 8 秒待機することを除きます。

2) 書かれているのとまったく同じコードですが、ページの別の場所でランダムな div に切り替えます。これは明らかに私が本当に非表示にしたい "#kbm" です --> 結果: 新しく選択された div は正しく動作し、すべてのアニメーションは正しい順序でタイムリーに

3) HTML 内の要素の順序を再配置する

position: relative4)代わりに試すabsolute

.css5）スクリプトからコマンドを削除し.animate、すべてに使用する

ジャバスクリプト:

function loadnextpage(response)
{

    word = response["word"];
    imgarray = response["imgarray"];
    loadgame();

    $("#kbm").animate({"top": "-340"},500,function(){
        $("#kbm").css("top","-1000px");
        $(".key").animate({"left": "0px"},1000,function(){
            $("#keyboard").css("overflow", "visible");
        });
    });

}

HTML:

<body>
<div id="pagec">

    <div id="mainc">
        <div id="wordpic"><div id="wordpicbg" class="bg"></div></div>
        <div id="wordblanks"><div id="wordblankbg" class="bg"></div></div>
        <div id="keyboard">
            <div id="keyboardbg" class="bg"></div>
            <div id="kbm"><img src="i/medal.png"><img src="i/arrow.png" id="arrow" onclick="loadnext()"></div>
        </div>
    </div>
</div>
</body>

CSS:

#kbm
{
    display: inline-block;
    position: absolute;
    left: 340px;
    top: -1000px;
    width: 500px;
    height: 340px;
}
4

1 に答える 1

1

.stop() は、次のアニメーションに移動する前にアニメーション キューがクリアされるため、この動作を防ぎます。アニメーション時間と組み込みの遅延 (.delay() を使用) は、特に多くの要素をアニメーション化する場合に、アニメーション キューの遅延に加算される可能性があります。

詳細については、http: //api.jquery.com/animate/ (キューに関する部分) を参照してください。

于 2012-09-06T23:17:28.970 に答える