Animate CSS display

Question

Is there a way to animate the CSS display property in jQuery? I have the following:

$(".maincontent").css("display","block"); 

and want it to do something like this:

$(".maincontent").animate({"display": "block"}, 2500); 

Answer 1

Just use .show() passing it a parameter:

$(".maincontent").show(2500); 

Edit (based on comments):

The above code fades in the element over a 2.5 second span. If instead you want a 2.5 second delay and then want the element to display, use the following:

$(".maincontent").delay(2500).fadeIn(); 

If, of course, you want a delay and a longer fade, just pass the number of milliseconds desired into each method.