Retrieve Data Step by Step after a certain delay using ajax and jquery in php

Question

I am a beginner at Jquery. What i want is to display the data using AJAX in a step by step manner. So let say if in my database there is a table "DATA" with a field name "info" having multiple rows as a data

info

1 2 3 4 5

Now i want to display all the five rows but after a certain delay of time let say after a second.

So i want to use Jquery with AJAX to retrieve data from mySQL table and display each row after a second.

Please provide an example for solving this problem. Thanks in Advance...

Answer 1

You can use the delay() method. Let's suppose you have fetched records through ajax and use the fadeIn animation, you can go about something like this:

$('<div>').html(AjaxResponse).addClass('test').hide();
$('div.test').slideUp(300).delay(1000).fadeIn(400);

Or use setTimeout instead:

setTimeout(function() { $('div.test').slideUp(300).delay(1000).fadeIn(400); }, 5000);

Answer 2

jQuery DOES have a delay function, making this just a possible as you describe it.

You may have to delimit the data you send (with your PHP script) back to your jQuery script, so that in your jQuery you can split on that delimiter.

Then simply use a loop, combining the appearance functions and the delay()