Выделение всех дочерних элементов и их исчезновение с помощью jQuery?

Я использую следующий код 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" с классом "awesome".

Это то, что я пробовал до сих пор:

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

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

Тот же результат здесь.

Что я делаю неправильно? Мне нужно только fadeOut содержание <div id="contain"> и оставь все остальное таким же, как оно есть.

Источник

2 ответа

Решение

Вам необходимо использовать:

$("#contain").children().fadeOut(1000);
  • $(this) ваш селектор
  • .children() выбирает всех дочерних элементов
  • .fadeOut(1000) затухает текущий выбор

Ваши попытки были неверны, потому что:

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

Выбирает все элементы с классом .contain и прячет их

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

Выбирает элементы с классом .contain, а затем вы передаете функцию .children() с которым он не справляется.

Обратите внимание, в вашем случае contain это идентификатор, а не класс.

Источник

Кроме изменения "." "#" сформировать селектор jquery, если вам не нужно ничего вставлять или отображать новый контент в <div id="contain">, вы можете просто сделать это

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

все ребенок тоже исчезнет

Источник
Другие вопросы по тегам