jquery - Checking and comparing new value to the old and do animation based on that -

how check if value has change in dom? i'm calling ajax function pull data database. blink or animation particular div if new value has been pushed. when "availability" changes animation once. div value has changed.

here's code:

 //function data database  function getrealdata() {      $.ajax({          url: 'test_api.php',          data: "",          datatype: 'json',          success: function (rows) {               var text = '';               (var 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);                   if (availability == 0){                      var img = "img/tick.png";                   }                   if (availability == 1){                      var img = "img/warning.png";                  }                   if (availability == 2){                      var img = "img/alert.png";                  }                   text+= '<section class="square"><h3> ' + intranet + '</h3><img src='+img+' width="70" height="70" rel='+availability+' alt="warning"/><h4><img src="img/time_icon.png" width="20" height="20" alt="clock" class="clock" /> '+ timerespons+'</h4>';                      text += '</section>';                     }              $("#journey").html(text);            }      });  }   //this refreshes data every 2seconds  setinterval(getrealdata, 2000);   //call function display data  getrealdata(); 

many help!

edit

the output :

<div id="journey">     <div class="square>availability: 0 hostname: aaa intranet: ttt timeresponse:0.124</div>     <div class="square>availability: 0 hostname: qqq intranet: hhh timeresponse:0.064</div>     <div class="square>availability: 0 hostname: www intranet: nnn timeresponse:0.303</div>     <div class="square>availability: 0 hostname: rrr intranet: rrr timeresponse:0.019</div>     <div class="square>availability: 0 hostname: eee intranet: uuu timeresponse:0.025</div>     <div class="square>availability: 0 hostname: ggg intranet: ooo timeresponse:0.158</div> </div> 

ok, think understand question.

function getrealdata() {  $.ajax({      url: 'test_api.php',      data: "",      datatype: 'json',      success: function (rows) {           var text = '';           (var 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);               if (availability == 0){                  var img = "img/tick.png";               }               if (availability == 1){                  var img = "img/warning.png";              }               if (availability == 2){                  var img = "img/alert.png";              }               text+= '<section class="square new"><h3> ' + intranet + '</h3><img src='+img+' width="70" height="70" rel='+availability+' alt="warning"/><h4><img src="img/time_icon.png" width="20" height="20" alt="clock" class="clock" /> '+ timerespons+'</h4>';//added class called new in section here                  text += '</section>';                 }          $("#journey").html(text);        }  });        $(".square.new").each(function(){//wrote code animate , remove new class              $(this).effect( "highlight", {color: 'red'}, 3000 );              $(this).removeclass("new");       });  }    //this refreshes data every 2seconds     setinterval(getrealdata, 2000);     //call function display data    getrealdata();