jQuery：アニメーションとAJAXリクエストの連鎖

Question

商品リストページがあり、AJAX経由で各商品の詳細ビューを読み込んでページ内に表示したいと考えています。私はアニメーションを設定したい条件のより複雑なセットを持っていますが、ここでは簡単にしておきます。

基本的に、クリックすると、AJAXリクエストを実行し、同時に（場合によっては一連のアニメーションをアニメーション化して）コンテンツラッパーが開き、「読み込み中」の状態を表示したいと考えています。それらの両方が完了したら、私はドロップインして、コンテンツをアニメーション化したいと思っています。私はjQuery Deferred Objectsが行く方法だと思っていましたが、私はそれらをよく理解していないし、私の試みは私が欲しいところに私を与えてくれていません。

私はこのような何か試してみました：

var dfr = $.Deferred(); 
dfr.then(function() { return wrapper.fadeIn(5000); }); 

$.when(dfr, $.get('/detail.html')) 
.then(function() { 
    console.log('All done, run additional animations...'); 
}); 

dfr.resolve(); 

を...しかし、それは、すぐにAJAX要求はアニメーションがまだ実行されている場合でも、行われているようにトリガされます。

var dfr = $.Deferred(); 
dfr.then(function() { return wrapper.fadeIn(5000); }); 
dfr.then(function() { return $.get('/detail.html'}) }); 
dfr.done(function() { console.log('All done, run additional animations...'); }); 
dfr.resolve(); 

...しかし、それはただ同時にthen/done呼び出しのすべてを実行します。

は私もこれを試してみました。私も thenコールの代わりに pipeに切り替えようとしましたが、無駄です。

私はDeferred Objectsを理解するのが大好きです（これは適切な/意図された用途でもありますか？）、もちろん、このページの目標をどのように達成できるのでしょうか。

$('.content').ajaxStop(function() { 
    animateContent(); 
}); 

.ajaxStop（）here

Answer 1

の詳細このページをしている：すべてのヘルプやヒントがはるかに高く評価されている....

Answer 2

それはあなたのAjaxリクエストが完了したハンドラを登録するのを助けることができますあなたが何を言ってるのかを正確に行うことの例：

： http://www.erichynds.com/jquery/using-deferreds-in-jquery/

それは、このようなより多くのです

Answer 3

jQueryコレクションは観測可能です（promiseメソッドがあります）。ですから、非常に簡単にこれを行うことができます：あなたはさまざまな要素の連鎖アニメーションに必要がある場合は、

$.when(wrapper.fadeIn(5000), $.get("/whatever")).done(function() { 
    // animation and ajax request complete 
}); 

を（.pipeを使用）：

function chainAnim() { 
    return wrapper.fadeIn(5000).promise().pipe(function() { 
     return internal.fadeIn(1000); 
    }); 
} 

chainAnim().done(function() { 
    // wrapper than internal faded in 
}); 

あなたはまだもちろん、$ .whenを使用することができます。

を

$.when(chainAnim(), $.get("/whatever")).done(function() { 
    // animation and ajax request complete 
});