Question

我有一个搜索功能，它使用AJAX请求从我的网络服务器获取数据。

我希望有一个淡入淡出的动画应用于每个搜索结果，稍有延迟，以便最后一个结果在最后消失（即第一个结果加载，开始淡入，下一个加载，开始淡入等等）。

我有将代码加载到搜索结果区域的代码，但似乎就像结果同时显示并运行“淡入淡出动画”一样 - 尽管这可能也是因为我的电脑太慢了。

这是我的代码：

JS

$.ajax({
  type: 'GET',
  url: '/PersonSearch',
  data: {
    'search_value': search
  },
  dataType: 'json',
})
.done(function(json) {
  $('#main').html('');
  $.each(json, function(key, value) {
    var search = $('<div />', {
       id: 'search' + key,
       'class': 'search-item off',
       html: 
        '<div class="basic-info">' +
          '<span class="first-name">' + value.First_name + '</span>' +
          '<span> </span>' +
          '<span class="last-name">' + value.Last_name + '</span>' +
        '</div>' +
        '<div class="dropdown">' +
          '<span class="phone-number">' + 'PHONE: ' + value.Phone_number + '</span>' +
          '<span class="email">' + 'EMAIL: ' + value.Email_address + '</span>' +
          '<div class="box edit"><img src="../media/gear.svg"/></div>' +
        '</div>'
    }).appendTo('#main');
    setTimeout(function() {
      search.removeClass('off');
    });
  });
});

CSS

.search-item.off{
  opacity: 0;
  top: 8px;
}
.search-item{
  overflow: hidden;
  position: relative;
  opacity: 1px;
  top: 0;
  transition: .75s;
}

HTML

<div id="main">

</div>

基本上代码的作用（所以你不需要自己拼凑）是它添加了search-item off类的搜索结果，并且加载了<div>后（使用{ {1}}）它删除了setTimeout()类，然后使用off CSS attrib使其随着时间的推移淡入。

我尝试在transition上使用setTimeout()，但这不起作用。

我需要它，以便在.appendTo('#main')元素中发布每个搜索结果时出现延迟，以便延迟运行淡入淡出动画。

Answer 1

尝试使用

setTimeout(function() { ... }, 0);

它将等待您的内容完全加载。

Answer 2

您的想法可行，但您需要为setTimeout的来电添加一点延迟。必须为每个新结果增加延迟。为了确保它正常工作，首先使用长延迟（1000，即1秒），然后根据需要调整爱人值。

setTimeout(function() { ... }, 1000 * index);

下面是一个简单的代码段，说明使用setTimeout来延迟对append的连续调用

＆＃13;

$(function() {
  var $container = $('#container');
  $.each(['foo', 'bar', 'qux'], function(i, value) {
    setTimeout(function() {
      $container.append('<div>' + value + '</div>');
    }, 1000 * i);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>

＆＃13;

Answer 3

这是因为setTimeout异步工作，这意味着这些setTimeout函数将在5ms，10ms，13ms等处启动，并在相似的时间启动。您可以做的是在ajax调用之上定义timeout变量，并在each之前setTimeout调用时增加超时，并将此timeout变量作为超时值提供给{{1} }}。以下是一个例子（我知道太多超时）：

＆＃13;

setTimeout

＆＃13;

var timeout = 0;
$('div').each(function() {
  var $this = $(this);
  timeout += 1000;
  setTimeout(function() {
    $this.hide('slow');
  }, timeout);
});

＆＃13;

Answer 4

尝试在$ .each（）函数的回调中使用超时。

$.each(json, setTimeout(function(key, value) {...},1000) )

AJAX - 显示AJAX结果之间的延迟时间

4 个答案: