Как отображать динамически сгенерированные элементы с помощью slideDown()?

Question

Я использую следующий код, чтобы изменить содержание .elements когда #select-element значения изменяются:

$("#select-element").on('change', function() { 
    var dtype = $("#select-element").val(); 

    $.ajax({ 
    type: 'GET', 
    url: '/?type='+dtype, 
    dataType: 'json', 
    success: function(result) { 
     for (var r in result) { 
     var row = ' \ 
      <div class="row">result[r].name \ 
      </div> \ 
     '; 
     $('.elements').prepend(row); 
     } 
    }, 
    error: function (jqXHR, textStatus) { 
    }, 
    beforeSend: function(){ 
     $(".elements").slideUp(function() { 
     $(".elements").children().remove(); 
     }); 
    }, 
    complete: function(){ 
     $(".elements").slideDown(); 
    } 
    }); 
}); 

Это хорошо работает, если я удалю slideUp() функции. Но если он есть, то новый контент не отображается. Похоже, проблема связана с функцией slideDown(), которая не хочет отображать динамически сгенерированный элемент.

Как это исправить?

Answer 1

Проблема в том, что продолжительность slideUp() составляет 400 мс по умолчанию. Затем, после этого 400 мс, вы удалите детей.

Предположим, что ajax выполняется за 200 мс (меньше времени, чем продолжительность анимации) ... ваш новый контент будет вставлен во время вызова children().remove().

Предлагаю вам удалить beforeSend и complete и объединить все в обратном вызове slideUp внутри обработчика success.

$.ajax({ 
    type: 'GET', 
    url: '/?type=' + dtype, 
    dataType: 'json', 
    success: function(result) { 
    var $elems = $(".elements"); 
    // do slideUp 
    $elems.slideUp(function() { 
     // now change content 
     $elems.empty(); 

     for (var r in result) { 
     var row = ' \ 
      <div class="row">result[r].name \ 
      </div> \ 
     '; 
     $elems.prepend(row); 
     } 
     // and display new content 
     $elems.slideDown(); 
    }); 
    }, 
    error: function(jqXHR, textStatus) {} 
}); 

В качестве альтернативы можно использовать обещание, возвращенного JQuery анимации