Спрятать анимацию ящиков для брата

Question

Я бы хотел оживить здесь какой-нибудь javascript, но не могу найти хорошего решения.То, что я пытаюсь сделать, это: - Когда вы нажимаете на поле, все остальные поля исчезают один за другим.- Если поле будет, скажем, последним, то оно будет переходить от последнего к первому блоку, скользя влево, а затем к следующей строке, когда поля исчезают

Прямо сейчас, я сделал несколько простых jquery, но все они исчезают одновременно, так что это очень странно!Но я не могу понять, как правильно анимировать это.Мой код выглядит следующим образом:

<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">

    <h4 class="px-5">Lorem ipsum dolor</h4>

    <a href="#" class="button-link px-5">
        Click Here
        <span class="btn-inner--icon">
            <img
            src="arrow-right-black.svg"
            alt="arrow-right-black"
            />
        </span>
    </a>

</div>

$(".team-box").on("click", function() {
        event.preventDefault();
        $(this).siblings().hide();
    });

Может ли кто-нибудь подсказать мне, как этого добиться?Большое спасибо, ребята!

Answer 1

Вы можете использовать first(), чтобы получить первых братьев и сестер

$(".team-box").on("click", function() {
        event.preventDefault();
        var first = $(this).siblings('.team-box').first();
        $(first).hide();
    });

$(".team-box").on("click", function() {
        event.preventDefault();
        var first = $(this).siblings('.team-box').first();
        $(first).hide();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">

    <h4 class="px-5">Lorem ipsum dolor</h4>

    <a href="#" class="button-link px-5">
        Click Here
        <span class="btn-inner--icon">
            <img
            src="arrow-right-black.svg"
            alt="arrow-right-black"
            />
        </span>
    </a>

</div>
<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">

    <h4 class="px-5">Lorem ipsum dolor</h4>

    <a href="#" class="button-link px-5">
        Click Here
        <span class="btn-inner--icon">
            <img
            src="arrow-right-black.svg"
            alt="arrow-right-black"
            />
        </span>
    </a>

</div>
<div class="col-12 col-sm-6 col-lg-6 col-xl-3 border border-default py-5 team-box">

    <h4 class="px-5">Lorem ipsum dolor</h4>

    <a href="#" class="button-link px-5">
        Click Here
        <span class="btn-inner--icon">
            <img
            src="arrow-right-black.svg"
            alt="arrow-right-black"
            />
        </span>
    </a>

</div>