Question

我目前正在尝试使用jQuery淡化包含一些其他子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更改为其他数字以调整渐变速度

Answer 2

也许这就是你要找的东西？

$("#PopupView").hide("slow");

再次显示它使用：

$("#PopupView").show("fast");

参考文献：http://api.jquery.com/hide/

Answer 3

我之前应该看到这个。因为子元素是：

position:absolute;

将其更改为：

position:inline;

应该褪色。

Answer 4

正如你的评论中所提到的，孩子们并没有隐藏起来。试试这个（尽管这比我想象的要多得多）;

$("#PopupView").fadeOut(300, function(){ $(this).find("div").css("display","none");});

然后淡出：

$("#PopupView").fadeIn(300, function(){ $(this).find("div").css("display","block");});

或者您可以使用.css("visibility","hidden")和.css("visibility","visible")

让我知道这是做什么的？同样，在大多数浏览器中

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

会工作得很好。永远不要与Maple混淆。

编辑：

或者更好的是，尝试明确地淡出一切：

$("#PopupView").fadeOut(100);
$("#PopupView div").fadeOut(100);

和他们的对立面。东西应该得到你想要的东西！

Answer 5

做了这个，测试和工作。

<html>
<head>
<title>test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function()
    {
        $("#PopupView").bind('click', function(){
            alert("boom");
            $("#PopupView").fadeOut('slow');
        });
    })
    </script>
<style type="text/css" media="screen">
#PopupView {
    /*position:absolute;*/
    /*top:53px;*/
    /*left:0px;*/
    width:604px;
    height:289px;
    z-index:99;
    background:red;
}
#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);
}
</style>
</head>
<body>
<!-- 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>
</body>
</html>

如何淡化div父母和它的各自的孩子？

5 个答案: