Question

我有一个项目的ul列表，并且正在使用jquery load（）函数加载新添加的项目，并且我希望使用一些动画加载该项目

$('#ulitems').load(location.href + ' #ulitems').fadeIn(1000);

我已经这样使用了fadeIn（1000）或fadeIn（'1000'），但它不起作用

添加新项目后在浏览器中生成的

html代码

<ul class="list-group list-group-flush" id="ulitems">
 <ul class="list-group list-group-flush" id="ulitems">
   <li class="list-group-item items">asd</li>
   <li class="list-group-item items">Market</li>
   <li class="list-group-item items">Gym</li>
   <li class="list-group-item items">tea</li>
   <li class="list-group-item items">b</li>
 </ul>
</ul>

jquery代码

$('#btnAddItem').click(function (event) {
  event.preventDefault();
  var text = $('input').val();
  $.ajax({
      type: 'POST',
      url: 'list',
      data: {
          'text': text
      },
      success: function (data) {
          //alert(data.success);
          console.log(data);
          $('#ulitems').load(location.href + ' #ulitems').fadeIn(1000);
      }
  });

我想在新添加的li元素中添加一些动画。谢谢。

Answer 1

.load()是异步的
您希望添加ul的所有内部元素，而不是将其本身包装起来，因此添加#ulitems > *。
添加新元素时，它们已经可见，因此请先将其隐藏：

$('#ulitems').load(location.href + ' #ulitems > *', function () {
    $('#ulitems').hide().fadeIn(1000);
});

如何在加载功能中应用动画？

1 个答案: