Question

我有一个网页，当有人搜索某些内容时，会调用AJAX。我想要它，以便当每个结果中的结果加载完成特定的加载动画时＃34; （比如，每个搜索结果都会单独淡出 - 而不是整个结果组一起消失）。

我目前如何使用JS是所有对象同时放入，但这只允许我同时为所有对象设置样式。

这是我的代码：

JS：

$.ajax({
  type: 'GET',
  url: '/Search',
  data: {
    'search_value': str
  },
  dataType: 'text',
})
.done(function(json) {
  var Search = JSON.parse(json), searchHTML = '', x;
  for (x in Search) {
    $('<span id="item'+x+"' class="search-item" style="display: none;">'+  Search[x] + '</span>').appendTo('#main');
    //this is to set the fade it
    //(the .css is there so it isn't accidentally forgotten about in the css)
    $('.search-item').css('opacity', '0');
    $('.search-item').fadeTo(500, 1);
  }

});

HTML

<div id="main">

</div>

我试图让它成为最后，而不是所有的html设置在最后，它添加到最后一个，或类似的东西，所以每个人有一个动画设置火为它何时加载到html中

谢谢

更新

代码已使用以下答案中的代码进行了更新。仍然需要代码来启动动画中的新加载＆＃34;对于每个搜索响应。

Answer 1

在您的情况下，您可以使用带有appendChild()功能的 jquery .show() 功能，以下是您的代码：

$.ajax({
  type: 'GET',
  url: '/Search',
  data: {
    'search_value': str
  },
  dataType: 'text',
})
.done(function(json) {
  var Search = JSON.parse(json), searchHTML = '', x;
  for (x in Search) {
    $('<span id="item'+x+"' class="search-item" style="display: none;">'+  Search[x] + '</span>').appendTo('#main').show('slow');
  }
});

JS - 为从AJAX调用传递的每个元素加载动画

1 个答案: