JQuery - div fading trouble

Question

Hello, I have div, which has id 'content'. It's visible.

<div id="wrapper" style="display:block">
  <div id="content">
    Some text
  </div>
</div>

Now I want to fade it out:

$('#wrapper').fadeIn( 1500 );
$('#content').click(function(){
   $(this).fadeOut( 1500 );
});

And nothing happens. But when I wrote:

$('#content').fadeIn( 1500 );

It hides and then shows again.

---

Here is css

#content
{
    height: 100%;
    width: 100%;
}

Browser: Firefox 3.5.3 under Linux Gentoo

upd

When I type code:

$('#content').hide();

It hides correctly.

---

upd

I've solved problem... I can't understand, why did it was... Just replaced jquery.min with jquery

Answer 1

You have wrote $('#content') in the fadeOut and $('#conent') in the fadeIn. Other that this the effects are being called exactly the same way and offer no explanation as to why they wouldn't both be working as expected.

Answer 2

You are also leaving a # out in "#wrapper" (line 1 of jQuery).

Answer 3

It works for me, firefox on OSX. Make sure that your id's are unique, if you have a duplicate it might not work right. Also, your style: block is redundant, divs are blocks by default.