There is a code that adds new elements to the page using ajax. I want the new elements to stand out in color against the background of old ones, and later on with the help of animation, the color smoothly turned into the color of old elements. Tell me how to implement it?

$(document).ready(function(){ function check(){ var u=$('#body tr:first').data('u'); $.get("ajax.php?u="+u, function(data){ var d = jQuery.parseJSON(data); if(d.success>0){ $('#body').prepend(d.html); } }); } setInterval(function(){check()}, 5000); });

this code checks new items

    2 answers 2

    Well, something like this

     $(document).ready(function(){ function check(){ var u=$('#body tr:first').data('u'); $.get("ajax.php?u="+u, function(data){ var d = jQuery.parseJSON(data); if(d.success>0){ var e = $(d.html).css({backgroundColor: 'red'}); $('#body').prepend(e); setTimeout(function() { $(e).animate({backgroundColor: 'white'}, 10000); }, 10000); } }); } setInterval(function(){check()}, 5000); });
    • An interesting idea, but on this page I do not use css. Naryl jquery ui .animate({backgroundColor: 'white'}, 10000); and I want to fasten it - user193361
    • d.html contains <tr>...</tr> - table rows - user193361
    • @ user193361, I changed the answer. You can watch and try out - Yuri
    • I think setTimeout superfluous inside the condition, correct if not so - user193361
    • setTimeout creates a pause before smoothly changing the color to “normal”. You can remove it. This is optional - Yuri

    Try using highlight from jQuery UI:

     $( document ).click(function() { $( "#toggle" ).toggle( "highlight" ); }); 
      #toggle { width: 100px; height: 100px; background: #ccc; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <p>Кликните здесь чтобы скрыть/показать квадрат</p> <div id="toggle"></div>