javascript - Results displaying one at a time with a delay -

i have following code shuffles selection have in database. rather having results display @ one, want display result 1 @ time delay between results.

ie:

if have 10 items in database, want 1 item display, 3 second delay, second item display, 3 second result, way until last item (#10). possibly sort of animation it, flying screen or of item coming bag or something. (think picking numbered order 10 out of bag).

i have been told setinterval() approach, have no idea how make work code or if right approach.

how this?

here how shuffle db results.

<form method="post">  <?php         foreach ($array $result) {          $shuffle_firstname = htmlentities($result['firstname']);          $shuffle_lastname = htmlentities($result['lastname']);          $shuffle_id = htmlentities($result['id']);          $shuffle_username = htmlentities($result['username']);          $shuffle_email = htmlentities($result['email']);  ?>          <div class="shuffle_results"><?php echo $shuffle_firstname . ' ' . $shuffle_lastname; ?></div>          <input type="hidden" name="firstname[]" value="<?php echo $shuffle_firstname; ?>">          <input type="hidden" name="lastname[]" value="<?php echo $shuffle_lastname; ?>">          <input type="hidden" name="id[]" value="<?php echo $shuffle_id; ?>">          <input type="hidden" name="username[]" value="<?php echo $shuffle_username; ?>">          <input type="hidden" name="email[]" value="<?php echo $shuffle_email; ?>">      <?php      }  ?>             <input type="submit" value="finalize draft order" name="insert">      </form> 

update:

html file

$query = mysqli_query($con, "select * users `group` = 3");  echo 'users given draft order: <br>'; $array = array(); while ($row = mysqli_fetch_assoc($query)) {     $array[] = $row;     echo $row['firstname'] . ' ' . $row['lastname'] . '<br>'; } ?> <form method="post" name="form"> <input type="submit" value="create draft order" name="shuffle"> 

shuffled results: <br> <div id="results"></div> <form method="post">       <input type="submit" value="finalize draft order" name="insert"> </form> <img id='paperbag' src="http://www.thecuriouscaterpillar.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/a/bag_to_white.jpg" width="200px" /> //test shuffle var displayresults = function(data){     var = 0;     var interval = setinterval(function(){      if( <= data.length){      console.log( data[i] );      //i++;              $('#results').append('<div class="result" style="display:none;">' +                         '<div class="shuffle_results">' + data[i].firstname + ' ' + data[i].lastname + '</div>' +                          '<input type="hidden" name="firstname[]" value="' + data[i].firstname + '">' +                         '<input type="hidden" name="lastname[]" value="' + data[i].lastname + '">' +                         '<input type="hidden" name="id[]" value="' + data[i].id + '">' +                         '<input type="hidden" name="username[]" value="' + data[i].username + '">' +                         '<input type="hidden" name="email[]" value="' + data[i].email + '">' +                     '</div>');             $('.result').fadein(200);             i++;        } else {      clearinterval(interval);      }      }, 3000);      }; $(function(){       $('form').on('submit', function(e){         e.preventdefault();        $.post('shuffle_results.php', function(data){          var o = $.parsejson(data);          displayresults(o);          });         });     }); //end test shuffle 

php file

<?php $con = mysqli_connect("localhost", "", "", ""); $query = mysqli_query($con, "select * users `group` = 3"); $array = array();  while ($row = mysqli_fetch_assoc($query)) {     $array[] = $row;      if (isset($_post['shuffle'])) {     shuffle($array);     }     }     echo json_encode($array); ?> 

you try this: test using faux data in fiddle. close looking for?

client (using ctwheels's css)

<form method="post">     <input type="submit" value="shuffle" name="shuffle"> </form> <div id="#results"></div>  <script> var displayresults = function(data){     var = 0;     var interval = setinterval(function(){         if( <= data.length){             $('#results').append('<div class="result" style="display:none;">' +                         '<div class="shuffle_results">' + data[i].firstname + ' ' + data[i].lastname + '</div>' +                          '<input type="hidden" name="firstname[]" value="' + data[i].firstname + '">' +                         '<input type="hidden" name="lastname[]" value="' + data[i].lastname + '">' +                         '<input type="hidden" name="id[]" value="' + data[i].id + '">' +                         '<input type="hidden" name="username[]" value="' + data[i].username + '">' +                         '<input type="hidden" name="email[]" value="' + data[i].email + '">' +                     '</div>');             var $this = $('.shuffle_results:last');             $this.show().animate({                 'left': 0 + 'px',                 'bottom': $(document).height() - (lineheight * array.length) + 'px'             }, {                 duration: time             });             i++;         } else {             clearinterval(interval);         }     }, 3000); }; $(function(){       $('form').on('submit', function(e){         e.preventdefault();         $.getjson('path-to-your-script.php', function(data){             displayresults(data);         });     }); }); </script> 

server

<?php $con = mysqli_connect("localhost", "", "", ""); $query = mysqli_query($con, "select * users `group` = 3"); $array = array(); while ($row = mysqli_fetch_assoc($query)) {     $array[] = $row; } echo json_encode($array); ?>