2017-03-06 165 views
2

我需要運行一些動畫鏈。我試着用下面的代碼,但總是第二()在同一時間第一(運行)JQuery when()。done()無法正常工作

例子之一:

var first = function(){ 
    var d = new $.Deferred(); 
    $('#ajax-contract-info').fadeOut(1400, function() { 
        $('#ajax-contract-info').removeClass('in'); 
        $('#ajax-contract-info').css('display', ''); 
        d.resolve(); 
      }); 
    return d.promise(); 
}; 

var second = function() { 
    var d = new $.Deferred(); 
    $('#ajax-other-fields').fadeIn(1400, function() { d.resolve() }); 
    return d.promise(); 
}; 

$.when(first()) 
.done(second()); 

例子二:

var first = function(){ 
    return $('#ajax-contract-info').fadeOut(1400, function() { 
        $('#ajax-contract-info').removeClass('in'); 
        $('#ajax-contract-info').css('display', ''); 
      }).promise(); 
}; 

var second = function() { 
    return $('#ajax-other-fields').fadeIn(1400, function() { d.resolve() }).promise(); 
}; 

$.when(first()) 
.done(second()); 

哪裏是一個錯誤?

P.S.我知道,我可以在動畫調用中使用「完整」設置,但是我有很多關閉動畫的大條件列表,使用「完整」設置會使代碼無法讀取。

回答

5

.done(second())調用second並將其返回值到done,就像foo(bar())電話bar並將其結果爲foo。你只是想通過函數的引用,所以離開關()

$.when(first()) 
.done(second); 
// No() ---^ 

您也可以只是first()使用then,無需$.when除非你結合並行的承諾:

first().then(second); 

如果你還有第三個,你可以鏈中到結束,它會等待second因爲second完成返回一個承諾:

first().then(second).then(third);