获得结果并淡出

Don't know what is wrong, I've tried everything. The code should take simple info from PHP file and for each should fade in delay and out. I was successful with getting all the data at once but it is not good.

<script type="text/javascript">

    $('button').fadeOut('slow')
    var progressBar = $('.progress-bar');
    var percentVal = 0;
    window.setInterval(function(){
        percentVal += 10;
        progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
        if (percentVal == 100)
        {
            percentVal = 0;
        }
    }, 500);

    $(document).ready(function() {

        $("button").click(function() {                

            $.ajax({    //create an ajax request to load_page.php
                type: "GET",
                url: "submit.php",
                data: 'html',   //expect html to be returned                
                success: function(data){ 
                    for(var i=0;i<6;i++){
                        $('.input-group').html(data).fadeIn(500).delay(1000).fadeOut(500);
                    }

                }
            });

        });
    });

</script>

PHP CODE:

$array= ['apple','orange','grapes','avocado','banana'];
$indexedOnly = array();

foreach ($array as $row) {
    $indexedOnly[] = array_values($row);
}

echo json_encode($indexedOnly);

Try something like this, but if you want the animation of each element to wait for the previous one to finish you need to change the approach.

$.each(data, function(i, value) {
    $('.input-group').html(data).fadeIn(500).delay(1000).fadeOut(500);
});

I think you need to abandon the loops, they wont allow you to pause to wait for the animation to finish. You can try something like this where you handle each element in data then using the callback functions of .fadeIn and .fadeOut to call the next one

 function disp_next() {
 $('.input-group').text(data.shift()).hide();
    $('.input-group').fadeIn()
  .delay(1000)
  .fadeOut(function(){
    if(data.length !== 0) {
        disp_next();
    }
  })
 }

 disp_next();

You also need to change your dataType to json as you are expecting json from the server. Here is your jquery updated

 $(document).ready(function() {

    $("button").click(function() {                

              $.ajax({    //create an ajax request to load_page.php
                type: "GET",
                url: "submit.php",
                datatype: 'json',   //expect html to be returned                
                success: function(data){ 
                 data = Object.values(data);
                 function disp_next() {
                   $('.input-group').text(data.shift()).hide();
                    $('.input-group').fadeIn()
                    .delay(1000)
                    .fadeOut(function(){
                      if(data.length !== 0) {
                        disp_next();
                      }
                    })
                 }

                 disp_next();


            }
              });

       });
    });