delaying jquery css changes

I have written a code which makes a border of a div orange then after a second or two changes it to black, however what is actually happening is that it goes straight to black, any help please? than开发者_JAVA技巧ks!

Code:

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

---

The jQuery delay function only works on functions added to the fx queue (functions like fadeIn or slideDown). css is not one of these functions (try to delay any other non-fx-queue aware function and it won't work either).

From the docs:

Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

jQuery delay is not a substitute for the native JS setTimeout, which in this case would probably be the way to go. You could, for example, do something like this (working example here):

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

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

---

You cannot use delay() with css() as css changes aren't placed in the effects queue like animations are.

Instead, you will need to use setTimeout:

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

Edit: To animate border colour, you need to include the jQuery UI core and make sure you animate each side of the border independently. You can see an example of how to do this here.

---

@James-Allardice and @Luke-Bennet are correct that CSS changes aren't added to the fx queue by default, but there's no reason you can't put them there.

The second form of the .queue() method allows you to add anything to the queue. You don't even have to use the standard fx queue, you can create one of your own.

There are a few good example on the jQuery docs page, but here's one solving your specific needs:

$("#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();
}

It's ugly and inelegant, but it may be better than using setTimeout.

A better solution for your needs would be to use the .animate() method as @BorisD recommended. It's got the functionality you need built-in:

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

Note that the "100" you specified in your original example is only a tenth of a second. My examples use a half-second.

---

Why don't you use the .animate() in Jquery? Just set your CSS for the default border:

yourID or Class { border: 2px solid #ffa800; }

And then in your Jquery:

$("#yourID").animate({'border': '#000000'},3000); <----the last parameter is your delay= 3sec