slideDown有效，但是当我更改为slideUp时，它将停止工作

Question

我有2个小div，并排在一个较大的div中，显示flex。我希望其中一个小div通过向上滑动而出现，而另一个则通过向下滑动而出现。向下滑动时，它们都可以正常工作，但是当我改变向上滑动时，它们不会显示div。

我已经尝试过position：relative，也在jQuery中使用hide（）和show（）函数而不是display：在CSS中没有。但是我知道display：css中的none在向下滑动时都可以正常工作，所以我就是不明白！

   <div class="nousEtMission">
        <div id="quiSommesNous"> TEST 1
        </div>
        <div id="mission"> TEST 2
        </div>
    </div>

<script>

        $(document).ready(function () {
        $("#header").fadeIn(1500);
        $("#quiSommesNous").slideUp(3000);
        $("#mission").slideDown(3000);
</script>

.nousEtMission{
    display: flex;
    justify-content: space-evenly;
    height: 30vh;
}

#quiSommesNous{
    display: none;
    position: relative;
    background-color: rgb(123, 216, 35);
    width: 50%;
}

#mission{
    display: none;
    position: relative;
    background-color: rgb(26, 207, 132);
    width: 50%;
}