获取结果并褪去

不知道什么是错，我尝试了一切。代码应该从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);

来源

2017-07-27 Adrian Klark

你在控制台中得到任何错误？ –

array_values（$ row）;这个函数需要一个数组，并且根据你的代码传递字符串值 –

就像你所有的元素在同一时间被应用一样。所以你应该看到'香蕉'是唯一一个褪色......因为你正在改变同一元素的内容 – Daniel

我想你需要放弃循环，他们不会让你暂停等待动画完成。你可以尝试这样的事情，你在数据处理的每个元素，然后使用.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();

您还需要为您从期待JSON你dataType改变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(); 


      } 
       }); 

     }); 
    });

来源

2017-07-27 14:13:11 CumminUp07

谢谢，但我如何使用它，我是新的jquery成功后？谢谢 –

我编辑了回答，以显示您更新的jquery – CumminUp07

它不起作用我按下按钮，什么都没有发生:( –

尝试这样的事情，但如果你希望每个元素的动画等待前一个完成，你需要改变做法。

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

来源

2017-07-27 13:52:00 Daniel

谢谢，对不起，愚蠢的问题BU我应该在哪里放下它：？ –

这不是OP所要求的，他希望一次循环显示一个，每个独立显示 – CumminUp07

是CumminUp07并且慢慢褪色慢 –

获取结果并褪去

回答

相关问题