Reputation: 1400
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.
Upvotes: 0
Views: 813
Reputation: 1756
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>
Upvotes: 2
Reputation: 950
Try using the timeout in the callback of the $.each() function.
$.each(json, setTimeout(function(key, value) {...},1000) )
Upvotes: 0
Reputation: 165
try use
setTimeout(function() { ... }, 0);
It will wait that your content is fully loaded.
Upvotes: 2
Reputation: 362
This happens because setTimeout
works asynchronously which means these setTimeout
functions will start at 5ms, 10ms, 13ms, etc. and fire off at similar times as well. What you can do is define a timeout
variable above ajax call and increase timeout at each
call before setTimeout
and give this timeout
variable as the timeout value to the setTimeout
. Following is an example (I know too much timeout):
var timeout = 0;
$('div').each(function() {
var $this = $(this);
timeout += 1000;
setTimeout(function() {
$this.hide('slow');
}, timeout);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
Upvotes: 1