slideDown() после slideUp()

Question

Вот чего я пытаюсь достичь:

Одним нажатием кнопки сдвиньте div, после того, как он вверх - очистите содержимое, создайте строки в этом div и заполните строки данными, после того как все будет сделано - slideDown div. Я написал этот код (который вызывается при загрузке страницы и при нажатии одной из кнопок:

function create_rows()
{
$(".div_rows_container").slideUp(400, function(){
    $(".div_rows_container").html("");
    for(var i=0; i<arr_pros.length; i++)
    {
        if(arr_pros[i].pro_area==curr_area)
        {
            $("<div id='row_id_"+arr_pros[i].pro_id+"' class='div_row'></div>")
                .appendTo(".div_rows_container");
            populate_row(arr_pros[i], i)
        }
    }
    $(".div_rows_container").slideDown(400);
});
}

function populate_row(pro, i)
{
    var row_id = "#row_id_"+pro.pro_id;
    $("<div class='div_pro_name'></div>").html(pro.pro_name).appendTo(row_id);
    $("<div class='div_pro_address'></div>").html(pro.pro_address + ", " + pro.pro_city).appendTo(row_id);
    $("<div class='div_pro_phone'></div>").html(pro.pro_phone).appendTo(row_id);
}

Он скользит вверх, очищает содержимое, создает строки и заполняет их, но не скользит вниз. Это просто показывает мне все строки одновременно. Так как я могу сделать так, чтобы он тоже скользил вниз?

Answer 1

Можете ли вы попробовать следующий код:

var deferred = $.Deferred();

    function create_rows()
    {
    $(".div_rows_container").slideUp(400, function(){
        $(".div_rows_container").html("");
        for(var i=0; i<arr_pros.length; i++)
        {
            if(arr_pros[i].pro_area==curr_area)
            {
                $("<div id='row_id_"+arr_pros[i].pro_id+"' class='div_row'></div>")
                    .appendTo(".div_rows_container");
                populate_row(arr_pros[i], i)
            }
        }
    });
        deferred.resolve();
    }

    deferred.done(function() {
        $(".div_rows_container").slideDown(400);
    });

    function populate_row(pro, i)
    {
        var row_id = "#row_id_"+pro.pro_id;
        $("<div class='div_pro_name'></div>").html(pro.pro_name).appendTo(row_id);
        $("<div class='div_pro_address'></div>").html(pro.pro_address + ", " + pro.pro_city).appendTo(row_id);
        $("<div class='div_pro_phone'></div>").html(pro.pro_phone).appendTo(row_id);
    }

Пожалуйста, проверьте ссылку здесь: Как запустить функцию обратного вызова после выполнения цикла for в Jquery?

и об отложенном объекте:

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

Пожалуйста, дайте мне знать, если это работает, потому что мне тоже интересно, удачи.