Geek Answers Handbook

Javascript delay not working

this is my row table, my requirement for the first time displays the background color of the row in yellow after 4 seconds, the color disappears I use the following code

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

I am using the following code

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

the problem with the delay does not work

+4
source share
1 answer

Let CSS do background-color conversion (faster than JS):

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

Now, after loading the DOM, add the following JavaScript before closing the tag <body>:

// JS solution
setTimeout(function() {
    var element = document.getElementById('lock');
    element.classList.add('red');
}, 4000);

// jQuery solution
$('#lock').delay(4000).addClass('red'); // no good, check the edit.

Edit

, , . delay (, ). - , JS:

var $table = $("#lock");
$table.css("background-color", "yellow");

setTimeout(function () {
    $table.css("background-color", "red");
}, 4000);

, CSS.

.

+5

More articles:


All Articles