21

in jquery, how can I show a hidden div, and make it fade in?

marapet
  • 54,856
  • 12
  • 170
  • 184
Blankman
  • 259,732
  • 324
  • 769
  • 1,199

6 Answers6

48

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 1
    Question: why hide it initially using `.hide()` rather than plain ol' CSS? – dclowd9901 Jun 07 '10 at 23:58
  • 5
    @dclowd9901 because if JavaScript is disabled then the element will be always visible instead of always invisible. – Nathan Phillips Feb 21 '14 at 15:33
  • "I think sacrificing functionality for 99% of users to accommodate 1% is sheer bloody mindedness." -- https://stackoverflow.com/q/9478737/1066234 – Avatar Jul 16 '17 at 16:55
  • 1
    @KaiNoack it's more complex than that. JavaScript can also fail due to any error in either loading or the script itself. For example, a break in say a script loaded to have ads isn't something you'd want to hose the user experience. – Nick Craver Jul 16 '17 at 16:57
  • @dclowd9901 - *"why use the style sheet for styling?"* I guess it was an old comment, maybe your answer's changed... – ashleedawg Oct 08 '20 at 02:14
  • Ha! 10 years is a very long time. As a now staff engineer, I hope nobody comes across this question/answer series – dclowd9901 Oct 08 '20 at 19:10
2

Use fadeIn():

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

You may change the duration of the fadein:

$('#hiddendiv').fadeIn(1000); // 1000 ms
marapet
  • 54,856
  • 12
  • 170
  • 184
2

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

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
1

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.

cockypup
  • 1,013
  • 1
  • 10
  • 24
1
$("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()

Sean Vieira
  • 155,703
  • 32
  • 311
  • 293
0

*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;

Daniel Holmes
  • 1,952
  • 2
  • 17
  • 28
Greg Guida
  • 7,302
  • 4
  • 30
  • 40