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


            }
              });

       });
    });

获得结果并褪色

2 个答案: