.delay() not working when changing background-color of

Question

I am just learning JQUERY and I have been playing around with delay() I wrote a fiddle to show you... What I am trying to do is when a button is clicked, change the background-c

Answer 1

delay only works for items in the queue (such as animations).

For anything else, use a regular old timer:

$("#change").click(function() {
    var $el = $(".animation");

    $el.css("background", "blue");

    setTimeout(function () {
        $el.css("background", "red");
    }, 700);
});

Answer 2

You can use delay with queue here

  $(".animation").css("background","blue").delay(700)
         .queue(function() {
            $(this).css("background", "red").dequeue();
   });

Wrap above snippet inside click handler.

Answer 3

<div id="lock"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#lock').prepend('<tr><td>hello</td><td>cool</td><td>dad</td></tr>');
        $("#lock tr").css('background-color','yellow');
    $("#lock tr")
    .delay(4000)
    .queue(function() {
        $(this).css("background-color","red").dequeue();
    })
    .fadeIn();

});

</script>

Try this.