當新的Ajax數據推入時檢查並做動畫？

Question

我正在使用Ajax從數據庫中提取數據。當新數據（值）被拉入時，做一些動畫或通知的最佳方式是什麼？例如，如果可用性值發生變化，則閃爍或突出顯示特定的.box div 3次。

阿賈克斯：

  <script type="text/javascript"> 

      $(document).ready(function(){ 

       //function the get data from database 
       function getRealData(){ 
        $.ajax({ 
        url: 'test_api.php', 
        data: "", dataType: 'json', 
        success: function(rows) { 

        var text = ''; 

         for (var i in rows) { 

          var row = rows[i]; 

          var availability = row[3]; 

          var hostName = row[2]; 

          var intranet = row[6]; 

          var timeRespons = row[4]; 



          //console.log(availability); 

          text += '<div class="box"><b>availability: </b><span class="av ' + (availability == 1 ? 'avHighlight' : '') + '">'+availability+'</span>' + 
     '<b> hostName: </b>'+hostName+ '<b> intranet: </b>'+intranet+'<b> timeResponse:</b>'+timeRespons; 
    text += '<br/ ></div>'; 


         } 
         $("#content").html(text);  


        } 
       }); 
       } 

       //this refreshes data every 2seconds 
       setInterval(getRealData, 2000); 

       //call the function to display data 
       getRealData(); 


      }); 

    </script> 

HTML輸出：

availability: 0 hostName: aaa intranet: ttt timeResponse:0.124 
availability: 0 hostName: qqq intranet: ttt timeResponse:0.064 
availability: 0 hostName: www intranet: ttt timeResponse:0.303 
availability: 0 hostName: rrr intranet: ttt timeResponse:0.019 
availability: 0 hostName: eee intranet: ttt timeResponse:0.025 
availability: 0 hostName: ggg intranet: ttt timeResponse:0.158 

感謝你的幫助。

Answer 1

將此行替換爲下列之一。

$("#content").html(text); 

要

$("#content").html(text).hide().show("easeIn"); 
$("#content").html(text).hide().fadeIn("slow"); 
$("#content").html(text).hide().slideDown("slow");  

更多的動畫，你可以訪問http://www.easings.net

Answer 2

您可以設置烏爾功能之外的全局變量preData其中將包含以前的可用性value.Since所有div有相同class="box"我們不能將javascript動畫應用到該類。我們將不得不使用id then。從我所瞭解的情況來看，函數getRealData每2秒發生一次我認爲b中的變化ackground color將充當animation.Pls嘗試此代碼並讓我知道。

$(document).ready(function() { 

    var preData; 

//function the get data from database 
function getRealData() { 
    $.ajax({ 
     url: 'test_api.php', 
     data: "", 
     dataType: 'json', 
     success: function (rows) { 

      var text = ''; 

      for (var i in rows) { 

       var row = rows[i]; 

       var availability = row[3]; 
       var hostName = row[2]; 
       var intranet = row[6]; 
       var timeRespons = row[4]; 
       if(preData==''){ 
       preData=availability; 
       } 
       //console.log(availability); 

       text += '<div '; 
       if(availability!=preData){ 
       //set background color green if availability value changes 
        text+='style="background:green;"'; 
       } 

       text+= 'class="box"><b>availability: </b><span class="av ' + (availability == 1 ? 'avHighlight' : '') + '">' + availability + '</span>' + 
         '<b> hostName: </b>' + hostName + '<b> intranet: </b>' + intranet + '<b> timeResponse:</b>' + timeRespons; 
        text += '<br/ ></div>'; 

       //store new data to preData 
        preData=availability; 

       } 
      $("#content").html(text); 


     } 
    }); 
} 

//this refreshes data every 2seconds 
setInterval(getRealData, 2000); 

//call the function to display data 
getRealData(); 


});