javascript - 如何淡出 div 父级及其各自的子级？

Question

我目前正在尝试使用 jQuery 淡入淡出包含其他一些子 div 的特定 div。我以为它会起作用，但我认为还有更多...任何人都可以帮我找出淡入父 div 的所有元素的最佳方法吗？

当前使用以下内容，但只有父级 div 的背景正在淡入淡出，而子级 div 出于某种原因只是隐藏或显示，没有任何淡入淡出。

$("#PopupView").fadeIn();
$("#PopupView").fadeOut();

HTML:

<!-- Popup View -->
            <div id="PopupView">
                <div class="numCont">
                    <div class="bgNum"></div>
                    <div class="bgNumAni"></div>
                    <div id="txtPageNumber" class="number">3</div>
                </div>
                <div class="bottomRectangle">PAGE</div>
                <div class="leftArrow"></div>
                <div class="rightArrow"></div>
            </div>

CSS:

#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);
}

Answer 1

$("#PopupView").fadeOut("slow")

或

$("#PopupView").fadeOut(500)

您可以将值 500 更改为其他数字来调整淡入淡出的速度