Как я могу использовать, когда() с несколькими отложенными для выполнения эффектов выполняются несовместимо?

Question

Я пишу некоторый простой код пользовательского интерфейса, чтобы переставить макет при нажатии кнопки.

У меня есть панель поиска с тремя полями формы, кнопкой поиска, текстом и логотипом. При нажатии «поиск» кнопка, логотип и текст исчезают, панель с текстовыми полями скользит в верхнюю часть страницы с помощью 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(); 
    }); 

}); 

... в котором элементы пользовательского интерфейса больше не показываются их эффекты одновременно, потому что код не будет достигнут после первоначальной плавного изменения прозрачности.

Может ли кто-нибудь просветить меня о том, что я делаю неправильно здесь? Я уверен, что я неправильно понимаю использование when() и done(), но мне не удалось найти отличную документацию для использования нескольких отложенных объектов для сравнения с моим кодом.

Answer 1

Иногда его проще использовать вызов функции в конце анимации:

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

Answer 2

Вы можете использовать отложенный:

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/

Answer 3

Учитывая, что вы используете неизмененный .fadeOut() анимация для всех трех элементов, лучшим способом было бы вывести обещания в массив и оценить массив, используя $.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(); 
    }) 
});