如何使用when（）與多個延遲以使效果非同時運行？

我正在編寫一些簡單的UI代碼，以便在按下按鈕時重新排列布局。如何使用when（）與多個延遲以使效果非同時運行？

我有一個搜索欄有三個表單域，一個「搜索」按鈕，一些文本和一個標誌。在按下「搜索」時，按鈕，徽標和文本淡出，帶有文本字段的欄位使用jquery.animate()滑動到頁面頂部，徽標和搜索按鈕被賦予不同的CSS以重新定位它們，然後淡入在新的地點。使用

我想使用deferred.done（）這個JQuery documentation

我開始用下面的：

var fades = function() { 
    $("#centerSearchText").fadeOut(); 
    $("#headerImage").fadeOut(); 
    $("#searchButton").fadeOut(); 
} 

$.when(fades()).done(function() { 
    var positionUpdate = function() { 
     $("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" }); 
     $("#searchButton").appendTo("#search_input_table tr:first") 
     $("#header").animate({ 
      top: "0px", 
      marginTop: "0px", 
     }, 500); 
    } 

    $.when(cssUpdate()).done(function() { 
     $("#headerImage").fadeIn(); 
     $("#searchButton").fadeIn(); 
    }); 

});

...因爲每一個功能是同時運行，沒有工作。我意識到我沒有正確遵循的例子在下面鏈接的例子返回延期對象，如：

var effect = function() { 
    return $("div").fadeIn(800).delay(1200).fadeOut(); 
};

不過，我需要當三個fadeOuts()完成後返回，而不是隻有一個。所以，我在我的代碼更新到下面：

var fades = function() { 
    return $.when($("#centerSearchText").fadeOut(), $("#headerImage").fadeOut(), $("#searchbtn").fadeOut()).done() 
} 

$.when(fades()).done(function() { 
    var cssUpdate = function() { 
     return $.when($("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" }), 
        $("#searchbtn").appendTo("#search_input_table tr:first"), 
        $("#header").animate({ 
         top: "0px", 
         marginTop: "0px", 
        }, 500)).done(); 
    } 
    $.when(cssUpdate()).done(function() { 
     $("#headerImage").fadeIn(); 
     $("#searchbtn").fadeIn(); 
    }); 

});

...其中UI元素不再是同時運行的影響，因爲初始fadeOuts後達到無碼。

任何人都可以啓發我，我在做什麼錯在這裏？我確信我誤解了when()和done()的使用，但是我一直沒能找到使用多個延遲對象與我的代碼進行比較的優秀文檔。

來源

2015-06-17 UpQuark

你是什麼意思的「*，因爲在初始fadeOuts後沒有達到代碼*」？您的更新代碼現在是否按預期工作？ – Bergi

你可以忽略所有那些空的'.done（）'調用 - 它們什麼都不做。另外，'$ .when（...）'帶有一個參數（這已經是一個承諾）可以省略，例如'fades（）。done（...）'。 – Bergi

您最後一次嘗試......您在$（'（＃headerImage））之前缺少'$'...否則我希望您的代碼能夠正常工作，注意您不需要調用'。 done（）'，除非你準備好給它回撥 –

有時它更容易在動畫的結尾用一個函數調用：

$("#header").animate(
{ 
    top: "0px", 
    marginTop: "0px", 
}, 500, function() 
{ 
    // call next animation function here, it will be called upon completion 
});

來源

2015-06-17 21:52:49 oMiKeY

您可以使用延遲：

var deferred1 = $.Deferred(); 
var deferred2 = $.Deferred(); 
var deferred3 = $.Deferred(); 

$("#centerSearchText").fadeOut(1000, function() { deferred1.resolve(); }); 
$("#headerImage").fadeOut(1000, function() { deferred2.resolve(); }); 
$("#searchButton").fadeOut(1000, function() { deferred3.resolve(); }); 


$.when(deferred1, deferred2, deferred3).done(function() { 

    return when($("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" }), 
       $("#searchbtn").appendTo("#search_input_table tr:first"), 
       $("#header").animate({ 
        top: "0px", 
        marginTop: "0px", 
       }, 500)).done(); 
} 
$.when(cssUpdate()).done(function() { 
    $("#headerImage").fadeIn(); 
    $("#searchbtn").fadeIn(); 

});

http://api.jquery.com/category/deferred-object/

來源

2015-06-17 21:58:44 artm

由於您使用的是未經修改.fadeOut()所有三個元素的動畫，更好的方法是將promise轉換爲數組，並使用$.when()，例如：

// Define vars 
var fades = [], 
    cssUpdates = [], 
    positionUpdate = function() { 
     $("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" }); 
     $("#searchButton").appendTo("#search_input_table tr:first") 
     $("#header").animate({ 
      top: "0px", 
      marginTop: "0px", 
     }, 500); 
    }, 
    cssUpdate = function() { 
     return when($("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" }), 
        $("#searchbtn").appendTo("#search_input_table tr:first"), 
        $("#header").animate({ 
         top: "0px", 
         marginTop: "0px", 
        }, 500)).done(); 
    } 

// Fade out 
$("#centerSearchText, #headerImage, #searchButton").fadeOut(function() { 
    var d = new $.Deferred(); 
    fades.push(d.resolve()); 
}); 

// Listen to fadeOut completion 
$.when.apply($, fades).then(function() { 
    $.when(cssUpdate()).then(function() { 
     $("#headerImage, #searchbtn").fadeIn(); 
    }) 
});

來源

2015-06-17 22:12:07 Terry

如何使用when（）與多個延遲以使效果非同時運行？

回答

相關問題