Jquery css change delay

Question

I wrote a code that creates the border of a div-orange, after which a second or two changes it to black, however, what is actually happening is that it goes straight to black, any help, please? thanks!

the code:

$('#newMessage1').css('border','2px solid #ffa800').delay(100).css('border','2px solid #000000');

Answer 1

The jQuery delayfunction only works with functions added to the queue fx(functions such as fadeInor slideDown). cssis not one of these functions (try delayany other not fx-queue function and it will not work either).

From docs :

jQuery 1.4, .delay() , . . ; , .show() .hide(), .

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

$('#newMessage1').css('border','2px solid #ffa800');

setTimeout(function() { 
    $("#newMessage1").css('border','2px solid #000000'); 
}, 1000);

Answer 2

delay() css(), css , .

setTimeout:

$('#newMessage1').css('border','2px solid #ffa800');
setTimeout(function() { $('#newMessage1').css('border','2px solid #000000'); }, 1000);

. , ​​jQuery UI , . , .

Answer 3

@James-Allardice @Luke-Bennet , CSS fx , , .

. queue() - . fx, .

jQuery , :

$("#newmessage1").queue(function(){
    $(this).css("border", "2px solid #ffa800");
    $(this).dequeue();
});
$("#newmessage1").queue(function(){
    $(this).delay(500);
    $(this).css("border", "2px solid black");
    $(this).dequeue();
}

, , setTimeout.

. animate(), @BorisD. :

$("#newmessage1").css("border", "2px solid #ffa800");
$("#newmessage1").animate({"border": "2px solid black"}, 500);

, "100", , . .

Answer 4

.animate() JQuery? CSS :

yourID { border: 2px solid # ffa800; }

JQuery:

$( "# yourID" ). animate ({'border': '# 000000'}, 3000); < ---- = 3