4lackof 4lackof - 4 months ago 15
Ajax Question

AJAX - Delay time between displaying AJAX results

I have a search feature which uses an AJAX request to get data from my web-server.

I want to have a fade in animation which gets applied to each search result, with a slight delay so the last result fades in last (i.e. the first result loads, starts fading in, next one loads, starts fading in, etc.).

I have the code which loads the html into the search results area, but it seems like the results are displaying and running their "fade-in-animation" at the same time - although this could also be due to the fact that my computer is too slow.

Here's me code:

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>


Basically what the code does (so you do not need to piece it together yourself) is it adds the search result which has the class of
search-item off
, and once the
<div>
is loaded (using
setTimeout()
) it removes the
off
class, which then uses the
transition
CSS attrib to make it fade in over time.

I tried using
setTimeout()
on the
.appendTo('#main')
but that did not work.

I need it so that there is a delay in posting each of the search results in the
#main
element so that there is a delay in running the fade in animation.

Answer

Your idea could work, but you need to add a little delay to your call to setTimeout. The delay must be increased for each new result. To be sure that it is working, use a long delay at first (1000, ie. 1 second) then adjust with lover values as desired.

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

Below is a simple snippet that illustrate the use of setTimeout to delay the successive calls to append

$(function() {
  var $container = $('#container');
  $.each(['foo', 'bar', 'qux'], function(i, value) {
    setTimeout(function() {
      $container.append('<div>' + value + '</div>');
    }, 1000 * i);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>

Comments