获得结果并淡出

Question

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);

Answer 1

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);
});