jquery - javascript delay is not working -

this table row requirement first time displaying background color of row in yellow color after 4 seconds color become fade using following code

$('#lock').prepend('<tr><td>hello</td><td>cool</td><td>dad</td></tr>');

i using following code

$("#lock tr").css('background-color','yellow').delay(4000).css('background-color','fade'); 

problem delay not working

let css render background-color transition (quicker js):

#lock {     background-color: yellow;     transition: background-color 0.3s; }     #lock.red {     background-color: red; } 

now once dom loaded, add following javascript right before closing <body> tag:

// js solution settimeout(function() {     var element = document.getelementbyid('lock');     element.classlist.add('red'); }, 4000);  // jquery solution $('#lock').delay(4000).addclass('red'); // no good, check edit. 

edit

if want know why code doesn't work, check this answer. delay function seems work on items in queue (such animations). else, use regular old timer given in first js solution:

var $table = $("#lock"); $table.css("background-color", "yellow");  settimeout(function () {     $table.css("background-color", "red"); }, 4000); 

if want fade transition, you'd still have use css.

good luck.