Jquery Fade in for a div within a div

Question

Please help me on this.

This is my webpage.

<div id="wrapper">

   <div id="header">
      header text
   </div>

   <div id="content">
      content text
   </div>

</div>

I want to fade-in the #content block.

When I use $("#wrapper").fadeIn(1500); it works fine and it fades in the whole page But when i use $("#content").fadeIn(1500); it never works, nothing happends in regards to fading.

What am I doing wrong?

I tried $("#wrapper #content").fadeIn(1500); too, but no luck, can you guys please tell me how to target the #content div only?

Thanks heaps

nbsp · Answer 1 · 2012-07-09T00:27:26.940

It's hard to say for sure without seeing a sample page / code, but it sounds like you've got the #wrapper hidden but not the #content.

So it works when you fade-in #wrapper (thus showing all contained content) but it doesn't work when you fade-in #content because it's parent (#wrapper) is still hidden.

You might want to look at changing the #wrapper to be visible by default and the #content to hidden, so that a fade-in will show it correctly.

Again, this is all just conjecture at this point. If you add a link / sample then we can perhaps give a better answer.

score 2 · Answer 2 · answered Jul 09 '12 at 00:19

2

It's working for me. See the example here: http://jsfiddle.net/xwqPA/

answered Jul 09 '12 at 00:19

Conner

30,144
8
52
73

Thanks. I updated it the way i want. This is what I was after. Thanks heaps guys. http://jsfiddle.net/xwqPA/1/ – user1074803 Jul 09 '12 at 00:28
Hi Conner, just found out this doesnt work on ie8. what could be the issue? – user1074803 Jul 09 '12 at 02:41

score 2 · Answer 3 · edited Jul 09 '12 at 00:34

2

Set content div to display: none by default:

<div id="wrapper">
  <div id="header">
    header text
  </div>
  <div id="content" style="display: none;">
    content text
  </div>
</div>

edited Jul 09 '12 at 00:34

ahren

16,803
5
50
70

answered Jul 09 '12 at 00:20

Jérôme

2,070
15
21

@user1074803 you are welcome. I don't know why someone down-voted me on this one. Maybe a too short answer. – Jérôme Jul 09 '12 at 00:30
thanks @ahren I will try to "ctrl + K" next time I want to highlight some code within a sentence :-) – Jérôme Jul 09 '12 at 00:39
1

No worries @HighKickX, you can also use the ` character - which (on a US-layout keyboard) is just below the esc key. – ahren Jul 09 '12 at 00:40

Derek Hunziker · Answer 4 · 2012-07-09T00:30:39.577

When selecting two jQuery elements, separate them with commas:

$("#wrapper, #content").fadeIn(1500);

See multiple selectors

EDIT: Since this was down-voted, I feel the need to clarify further... You say that fading in #wrapper by itself works. From that, I can assume that #wrapper is hidden by default. Therefore, if you intend to "show" any of #wrapper's child elements, you will need to fade it in (or at least set it's display property to 'block' using show()) before you can attempt to fade in #content. This can be done by performing the fade on BOTH the wrapper and content divs as show above.

Jquery Fade in for a div within a div

4 Answers4