3

jQuery load（）を介してAJAX呼び出しを実行したいのですが、それが戻ってきたら、古いコンテンツをフェードアウトし、新しいコンテンツをフェードインします。新しいコンテンツが取得されるまで古いコンテンツを表示し続けたいのですが、その時点でフェードアウト/インがトリガーされます。

使用：

$('#data').fadeOut('slow').load('/url/').fadeIn('slow');

コンテンツはフェードインおよびフェードアウトし、しばらくするとload（）呼び出しが返され、データが更新されますが、フェードはすでに完了しています。

4

2 に答える 2

7

コールバックを使用して、呼び出しの順序を制御します。

var $data = $('#data');
$data.fadeOut('slow', function() { 
    $data.load('/url/', function() { 
        $data.fadeIn('slow'); 
    }); 
});

var $data = ... （注：使用し ているかどうかは100％わかりません$data.doStuff() が、実際に機能する場合は、毎回DOMツリーでdivを検索する必要がなくなりますが、そうでない場合は、最初のdivを削除するだけです。行と $('#data') どこでも使用...

于 2009-10-11T13:02:42.433 に答える
3

この問題は、fadeOut、load、fadeInの3つの関数すべてが非同期であるという事実に関連しています。上記の各関数は、関数の実行が終了したときに実行されるコールバック引数（関数）を受け入れます。例えば

$('#data').fadeOut(functionToRunWhenFadeOutIsComplete);

//'functionToRunWhenFadeOutIsComplete'を定義した場合、fadeOutが終了した後に実行されます。

この知識を身につければ、問題を解決できるようになります。

var fadeInData = function fadeInData() { $('#data').fadeIn(); }
var loadData = function loadData() { $('#data').load('url', fadeInData); }
$('#data').fadeOut(loadData);

または、loadData、fadeInDataをインライン無名関数として定義することもできます。

于 2009-10-11T13:18:57.370 に答える