4

そのため、ページを更新せずにサイトにページを動的にロードする JavaScript スクリプトを作成しようとしています。基本的に、コンテンツ div をフェードアウトし、新しいコンテンツをロードし、コンテンツを切り替えてからフェードインする関数があります。コンテンツは非同期 AJAX リクエストを使用してロードされ、成功するとコンテンツをフェードインする関数が呼び出されます。ロード機能とフェードアウト機能の両方が完了するまで、機能を実行しないでください。コンテンツがフェードアウトしている間ずっとページをロードしたいのですが、現在、フェードアニメーションがフリーズしています。これを理解するためにさまざまな方法を試しましたが、今のところ何も機能していません...

何か案は？

4

3 に答える 3

2

これは、2 つのイベントが完了するのを待ち、両方が完了したらアクションを実行するだけです。この他の質問に対する私の回答を参照してください。基本的：

イベントごとにフラグを設定します。最初は false です。問題の 2 つのイベント (アニメーションの完了コールバックと ajax 成功) をフックします。各イベントはフラグを設定し、関数を呼び出します。その関数はフラグをチェックします。両方が設定されている場合、何かを行います（あなたの場合、新しいコンテンツを設定します）。コード例については、リンクを参照してください。

于 2012-05-10T21:31:52.930 に答える
1

私は似たようなことをするサイトを持っています。スライドアウト、コンテンツの置換、およびスライドインの機能は次のとおりです。

var loadAnAjaxArticle = function (url) {
    var removeParentArticle = function () {
        // I don't like doing this, but so far haven't found a
        // particularly elegant way to replace the article
        // when calling load(), only append it.
        $('article').first().html($('article').last().html());
    };

    var showArticle = function (response, status, xhr) {
        if (status == "error") {
            $('article').first().html('<h2>There was an error processing your request.</h2>');
            $('article').first().slideDown('slow');
        } else {
            removeParentArticle();
            $('article').first().slideDown('slow');
        }
    };

    var loadArticle = function () {
        $('article').first().load(url + ' article', showArticle);
    };

    $('article').first().slideUp('slow', loadArticle);
}

基本的に.slideUp、コンテンツを非表示にするために呼び出し、別の関数へのコールバックを提供します。その関数は.loadコンテンツを更新するために呼び出し、別の関数へのコールバックを提供します。 この関数は、DOMを少し操作して見栄えを良くし（開発の初期段階ですが、まだエレガントにはしていません）、.slideDownコンテンツを再度表示するように呼び出します。

この場合、使用している各関数がコールバックを受け入れるため、これは簡単に実行できます。使用している関数が同じ機能を持っている場合は、この方法でそれらをチェーンできるはずです。

于 2012-05-10T21:37:13.393 に答える
1

フラグを設定し、両方の完了関数をチェックして、両方のイベントが完了したかどうかを確認するだけです。どちらの完了関数が両方が完了したことを検出しても、次のアクションをトリガーします。

あなたのコードの詳細を私たちに教えてくれませんでしたが、一般的な考え方は次のとおりです。

function loadNewPage(args) {

    var fadeDone = false;
    var ajaxData;

    function processAjaxDataWhenReady() {
        // if both have completed, then process the ajaxData and start the fadeIn
        if (fadeDone && ajaxData) {
            // process the ajaxData here
            $("#myContent").fadeIn();
        }
    }

    // start the fadeOut
    $("#myContent").fadeOut(function() {
        fadeDone = true;
        processAjaxDataWhenReady();
    });

    // start the ajax call
    $.ajax({...}, function(data) {
        ajaxData = data;
        processAjaxDataWhenReady();
    })

}
于 2012-05-10T21:44:33.813 に答える