Animate CSS display

jquery css jquery-animate
danyo picture danyo · Jul 25, 2013 · Viewed 80.8k times · Source

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

Derek Henderson picture Derek Henderson · Jul 25, 2013

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.

Related questions

animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over …

Read More
CSS rotation cross browser with jquery.animate()

I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a jsfiddle $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', …

Read More
Animate element to auto height with jQuery

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

Read More