jquery fadein does not fadein child div elements
<p>I have an seemingly simple question.  I am using jquery to fade in/out some content within a div labeled #home when I click a button.  </p>

<p>My issue is that if I create a child DIV within the #home div...whenever I click the button for #home to fade back in, the contents of the child DIV does NOT fade in.</p>

<p>However, any child, "p" or "img" works and will fade back in just fine, but not the contents within the child "div".  Please help!!</p>

<p>CSS:</p>

<h1>home {</h1>

<pre><code>display: block;
padding: 30px;
</code></pre>

<p>}</p>

<h1>home-button {</h1>

<pre><code>opacity: 1.0;
border-bottom: 1px solid black;
</code></pre>

<p>}</p>

<h1>about {</h1>

<pre><code>display: none;
padding: 30px;
</code></pre>

<p>}</p>

<h1>about-button {</h1>

<pre><code>opacity: 0.5;
border-bottom: 1px solid black;
</code></pre>

<p>}</p>

<p>JS:</p>

<p>$("#page-wrap div.button").click(function(){</p>

<pre><code>$clicked = $(this);

// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" &amp;&amp; $clicked.is(":not(animated)")) {

    $clicked.animate({
        opacity: 1,
        borderWidth: 5
    }, 600 );

    // each button div MUST have a "xx-button" and the target div must have an id "xx"
    var idToLoad = $clicked.attr("id").split('-');

    //we search trough the content for the visible div and we fade it out
    $("#content").find("div:visible").fadeOut("fast", function(){
        //once the fade out is completed, we start to fade in the right div
        $(this).parent().find("#"+idToLoad[0]).fadeIn();
    })
}

//we reset the other buttons to default style
$clicked.siblings(".button").animate({
    opacity: 0.5,
    borderWidth: 1
}, 600 );
</code></pre>

<p>});</p>
