0

私はWebアプリケーションのフロントエンドに取り組んでいます。すべてのコンテンツは、バックエンドから受け取ったJSONオブジェクトから生成されます。次に、このコンテンツをHTMLでラップし、DOMに追加します。私はjQueryappend（）を使用してこれを行います。コンテンツが追加されたら、古いページをアニメーション化し、新しいページをアニメーション化します。

私の問題は、アニメーションが開始する前にコンテンツの読み込みが完了していないように見えることです。また、アニメーションが開始する前に、すべてのCSSが有効になるわけではないようです。アニメーションが完了すると表示されます。

アニメーションを開始する前に、コンテンツの追加が終了したかどうかを確認する必要があると想定しました。append（）は同期しているはずですが、チェックしても問題ありません。

これは、関連するアニメーションのアイデアを提供するためのコードスニペットです。（注：これは私のコードのすべてではなく、私が何をしているのかを正確に理解するための最低限のことです）

  • 'mainTransitionContainer'は、新しいコンテンツが追加された要素です。
  • 'transitionWidth'は、古いページと新しいページの両方の幅を使用して決定される変数です。
  • これらのページは両方ともmainTransitionContainerの内部にあり、隣り合って浮かんでいます。
$(mainTransitionContainer).append(newElement);
$(mainTransitionContainer).ready(function () {
   $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'});
});

これは、コンテンツの読み込みが完了したかどうかを確認する正しい方法ですか？

私のコンテンツが正しく表示されない理由を誰かが知っていますか？

jQueryアニメーションはおそらく私のCSSスタイルに影響を与えていますか？

誰かアドバイスはありますか？よろしくお願いします。

4

2 に答える 2

1

おそらく、JSONを使用してデータをロードしている場合、データを取得するためにAjax呼び出しを使用していますか？

ここでは実際には機能を使用できません.ready()。これは、後で発生する可能性のあるAjax呼び出しに関係なく、ページが最初に読み込まれたときにトリガーされます。基本的に、目的の要素がアイドル状態になるたびに起動します（つまり、変更され、変更が完了してコードが実行されない最初の瞬間に、readyトリガーが起動します）

質問にスニペットがないため、ajax呼び出しがどのように構成されているかはわかりませんが、これは、必要な「ロード、書き込み、アニメーション化」構造を維持するために必要なことの大まかなスケッチです。

$.ajax({

    url: "http://my.url.com",

    type: 'get', //I assume. It could be 'post' dependent on what the code behind does.

    cache: false, //for good measure. IE will never execute the same request twice, unless you put this in.

    success: function(data_in_json_form) {

        var data_in_html_form = .... //Do something with the received data_in_json_form. You need to end up with a string of valid html code.

        $(mainTransitionContainer).append(data_in_html_form);

        //Now you can do the animation.
        $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'});

    }

});

覚えておくべき重要なことは次のとおりです。

  • 'success'関数にないコードは、ajaxt呼び出しが完了していなくても実行されます。Ajaxは非同期で動作するため、ブラウザーはajaxリクエストを開始し、応答を待たずに続行します。
  • Appendは同期的に機能します。ただし、Ajax呼び出しと組み合わせて使用​​する場合は、必ず「success」関数でのみコードを実行してください。
  • .ready()トリガーは実際にはにのみ使用する必要があります$(document).ready()。他のシナリオでも機能する可能性がありますが、問題に対する正しい解決策になることはほとんどありません。

これはあなたが説明している問題について私が作ったものです。何か足りないものがある場合は、JSON取得メソッドとそれに続くコードなど、さらにコードを投稿してください。

于 2012-08-17T09:47:12.827 に答える
0

私は他の場所で間違いを犯していることに気づきました。この問題は解決されました。コンテンツは同期的に追加されるため、コンテンツの追加が完了したときにイベントをトリガーする必要はありません。

于 2012-08-20T08:35:46.790 に答える