1

我正在使用 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

感谢您的帮助。

4

2 回答 2

2

将此行替换为以下内容之一。

$("#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

于 2013-07-18T11:28:36.420 回答
0

您可以在 ur 函数外部设置一个全局变量preData，该变量将包含以前的可用性值。由于所有 div 都具有相同class="box"的，我们不能将 javascript 动画应用于该类。我们将不得不使用idthen。据我了解，该函数getRealData每 2 秒发生一次我认为背景颜色的变化将充当动画。请尝试此代码并告诉我。

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


 });
于 2013-07-18T12:26:55.137 回答