How to fade a div parent and it's respective childrens?
<p>I'm currently trying to use jQuery to fade a particular div which contains a few other child divs.  I tought it would work but I think there is more to that...  Can anyone help me out what's the best way to fade all the elements of the parent div?</p>

<p>Currently using the following, but only the background of the parent div is fading and the childs are just hidden or shown without any fade for some reason.</p>

<pre><code>$("#PopupView").fadeIn();
$("#PopupView").fadeOut();
</code></pre>

<p>HTML:</p>

<pre><code>&lt;!-- Popup View --&gt;
            &lt;div id="PopupView"&gt;
                &lt;div class="numCont"&gt;
                    &lt;div class="bgNum"&gt;&lt;/div&gt;
                    &lt;div class="bgNumAni"&gt;&lt;/div&gt;
                    &lt;div id="txtPageNumber" class="number"&gt;3&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="bottomRectangle"&gt;PAGE&lt;/div&gt;
                &lt;div class="leftArrow"&gt;&lt;/div&gt;
                &lt;div class="rightArrow"&gt;&lt;/div&gt;
            &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#PopupView {
    position:absolute;
    top:53px;
    left:0px;
    width:604px;
    height:289px;
    z-index:99;
    background-image:url(../../res/drawable/list_bg.gif);
}

#PopupView .numCont {
    position:absolute;
    width:80px;
    height:80px;
    left: 256px;
    top: 85px;
}

#PopupView .numCont .number {
    position:absolute;
    width:80px;
    height:40px;
    font-family: Arial;
    font-size: 48px;
    font-weight: normal;
    text-align:center;
    color: #2884ff;
    top: 16px;
    left:0px;
}

#PopupView .numCont .bgNum {
    position:absolute;
    width:68px;
    height:68px;
    top: 6px;
    left: 6px;
    background-color:#0b0b0b;
}

#PopupView .numCont .bgNumAni {
    position:absolute;
    width:80px;
    height:80px;
    top: 0px;
    left: 0px;
    background-image:url(../../res/drawable/list_loadingBlocks_v1.gif);
    visibility:hidden;
}

#PopupView .bottomRectangle {
    position:absolute;
    width:68px;
    height:13px;
    left: 262px;
    top: 160px;
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    text-align:center;
    letter-spacing:3px;
    color: #414141;
    background-color:#080808;
    padding-top:2px;
}

#PopupView .leftArrow {
    position:absolute;
    width:32px;
    height:31px;
    left: 11px;
    top: 124px;
    background-image:url(../../res/drawable/list_leftArrow_normal.png);
}

#PopupView .rightArrow {
    position:absolute;
    width:32px;
    height:31px;
    left: 562px;
    top: 124px;
    background-image:url(../../res/drawable/list_rightArrow_normal.png);
}
</code></pre>
