jquery, Showing a hidden item with a fadeIn

in jquery, how can I show a 开发者_运维百科hidden div, and make it fade in?

---

Just hide the element initially, ether with .hide() or style="display: none;" (or display: none; in the stylesheet). Then, just call .fadeIn(), like this:

$("#elementID").fadeIn();

The .fadeIn() call automatically removes the display: none when it fades the opacity to 100%, it won't remove visibility: hidden; so don't use this, or you'll have to remove it manually.

---

Use fadeIn():

$('#hiddendiv').fadeIn();

You may change the duration of the fadein:

$('#hiddendiv').fadeIn(1000); // 1000 ms

---

Use fadeIn

$("selector").fadeIn();

Display the matched elements by fading them to opaque.

To hide it back anytime, you can use:

Note that you should initially hide it using css or jquery.

fadeOut

---

$("selector_for_your_div").fadeIn("slow");

For your edification, documentation for all of the bundled jQuery animation effects / tools is located at:
http://api.jquery.com/category/effects/

See: Jquery Documentation for fadeIn()

---

Just an extra comment to Nick Craver perfect answer:

If you element already has a display attribute (e.g. display:block), do not substitute that with display:none. Instead, just add an extra display attribute. Just make sure to add display:none after (under) the other display attribute. When an attribute is repeated, the last value takes precedence.

.class {
   ...
   display:block;
   display:none;
}

Your element will be initially hidden (because of the second display attribute). As soon as fadeIn() starts it will remove display:none but will not touch the first display (display:block in my example). The first display attribute will then be used to style the class while it is fading and stay put after fadeIn() is done.

---

*selector*.fadeIn(*speed in miliseconds*) is the function your looking for.

If you want the div to retain its space when its not seen use style="opacity:0;" instead of display:none;