使用Javascript

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>