获得结果并淡出

Question

不知道出什么问题了，我已经尝试了一切。 该代码应从PHP文件中获取简单信息，并且每个信息都应延迟淡出和淡出。 我成功一次获得了所有数据，但是效果不好。

<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代码：

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

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

echo json_encode($indexedOnly);

Answer 1

尝试类似的方法，但是如果您希望每个元素的动画都等待上一个元素完成，则需要更改方法。

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

Answer 2

我认为您需要放弃循环，它们不会允许您暂停以等待动画完成。 您可以尝试这样处理数据中的每个元素，然后使用.fadeIn和.fadeOut的回调函数来调用下一个

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

 disp_next();

您还需要将dataType更改为json因为您希望从服务器获取json。 这是您的jQuery更新

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


            }
              });

       });
    });