选择一个元素的所有子元素并使用jQuery淡出它们？答案

【问题标题】：Selecting all children of an element and fadeing them out using jQuery?选择一个元素的所有子元素并使用jQuery淡出它们？
【发布时间】：2013-04-04 21:58:54
【问题描述】：

我正在使用以下 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Project Quiz</title>
    <link rel="stylesheet" type="text/css" href="z/baseCss.CSS">
    <script src="/jquery-1.9.1.min.js"></script>
    <script src="/baseJS.js"></script>
</head>
<body>

<div id=header></div>
<div id=contain>
    <h1>Welcome to my web application</br>
  Please enter your name, click 'continue' and have fun</h1>
    <form>
        <input type="text" id="name" value="John Doe"/>
    </form>
    <div class="awesome">Continue</div><br/>
</div>
<div id=footer></div>

</body>
</html>

还有一段jQuery代码：

$(document).ready(function(){
    $("input")
        .focus(function(){
        $(this).css('outline-color','#559FFF');
        $(this).blur(function(){
            $(this).css("outline-color","#FF0000");
        });
    });
    $("input").click(function(){
     var value = $(this).val(function(){
         $(this).html("");
      });
    });
    $(".awesome").click(function(){
        b._slide(1000);
    });
    var b = $("div:nth-child(2)");
    alert(b);
});

我的问题是，我不知道如何选择 <div id="contain"> 的所有子级，并在单击具有“真棒”类的 div 按钮时让它们淡出。

这是我迄今为止尝试过的：

$(".contain").each(function(){
    $(this).fadeOut(1000);
});

but it didnt work also i tried: 
$(".contain").children(function(){
    $(this).fadeOut(1000);
});

这里的结果相同。

我做错了什么？我只需要将<div id="contain"> 的内容fadeOut 保持不变。

【问题讨论】：

标签： javascript jquery fadeout children

【解决方案1】：

你需要使用：

$("#contain").children().fadeOut(1000);

$(this) 是你的选择器
.children() 选择一个元素的所有子元素
.fadeOut(1000) 淡出当前选择

你的尝试是错误的，因为：

$(".contain").each(function(){ $(this).fadeOut(1000); });

选择类.contain的所有元素并隐藏它们

$(".contain").children(function(){ $(this).fadeOut(1000); });

选择类.contain 的元素，然后将一个函数传递给它不处理的.children()。

注意，在您的情况下，contain 是一个 ID，而不是一个类。

【讨论】：

我很高兴能帮上忙，祝你好运 שמח שעזרתי, בהצלחה :) 如果这个答案解决了您的问题，请考虑接受它。

【解决方案2】：

除了“。”到 jquery 选择器的“#”，如果你不需要插入任何东西或显示新内容到<div id="contain">，你可以这样做

$("#contain").fade(1000);

所有的孩子也会褪色

【讨论】：