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在200ms内完成（时间少于动画持续时间）......在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动画返回的保证

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

1 个答案: