CODEWITHSUNDEEP
jqueryhtmlweb
user1074803
user1074803

Reputation: 267

Jquery Fade in for a div within a div

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

Upvotes: 0

Views: 997

Answers (4)

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 2090

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>​​​

Upvotes: 2

Derek Hunziker
Derek Hunziker

Reputation: 13141

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.

Upvotes: 0

nbsp
nbsp

Reputation: 2291

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.

Upvotes: 4

Conner
Conner

Reputation: 31040

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

Upvotes: 2

Related Questions