どのように私はフェードアウト/フェードインする前に完了するためにjQueryのload（）を得ることができますか？

StackOverflow https://stackoverflow.com/questions/1550642

  •  20-09-2019
  •  | 
  •  

質問

私は（jQueryの負荷を経由してAJAX呼び出しをしたい）と、それを返すだけで一度、その後、新しいコンテンツ、古いコンテンツとフェードインをフェードアウト。私は/ Inがトリガされた時点でフェード、新しいコンテンツが取得されるまで示す残る古いコンテンツに出たい。

使用します：

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

内容は中とフェードアウトし、しばらく後に負荷（）の呼び出しが戻ると、データの更新が、フェードはすでに完了しています。

役に立ちましたか？

解決

コントロールへの呼び出しの順序をコールバックを使用します。

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

（注：私はないんだけど、100％確かであれば程度使用してのvar $data = ... およびの$data.doStuff() のは、実際に動作します - それがない場合、それはする必要がなくなりますDOMツリー内のdiv要素を毎回アップに見えますが、そうでない場合は、単に最初の行を削除し、使用の$('#data') のどこにでも... の

他のヒント

問題は、すべての3つの機能が、フェードアウト、負荷およびフェードインが非同期であるという事実に関係しています。上記の各関数は、関数が実行を終了したときに実行されるコールバックの引数（関数）を受け入れます。例えばます。

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

//あなたはフェードアウトが終わった後、それを実行する「functionToRunWhenFadeOutIsComplete」が定義されている場合。

この知識を武器に、あなたは今、あなたの問題を解決することができます。

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

また、あなたはインライン無名関数としてloaddataの、fadeInDataを定義することができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top