如何使用slideDown(）显示动态生成的元素

How to display dynamically generated elements with slideDown()?

本文关键字：元素 动态 显示 何使用 slideDown      更新时间：2023-11-22

当#select-element值更改时，我使用以下代码更改.elements的内容：

$("#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()函数上，它不想显示动态生成的元素。

我该怎么修？

问题是slideUp（）的持续时间默认为400ms。然后，在400毫秒后，您将移除子项。

假设ajax在200ms内完成（比动画持续时间更短）。。。您的新内容将在调用children().remove()时插入。

我建议您删除beforeSend和complete，并将所有内容组合到success处理程序内的slideUp回调中。

 $.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动画

返回的promise
相关文章：