为什么 jquery 动画会弄乱我在 boostrap 中的 nav flexbox 属性？

Question

这是我关心的 HTML：

<!-- navigation  -->
    <ul class="nav sticky-top flex-row justify-content-center">
      <li class="nav-item">
        <a class="nav-link active text-white" href="#">About Me</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">Contact Me</a>
      </li>
    </ul>

我的屏幕显示下面的照片，根据我应用于导航的引导属性，我不应该获得该照片。那么为什么会发生这种情况呢？老实说，JS 小提琴并不像我的页面上那样显示堆叠的导航项。我不知道为什么。

当我消除 Jquery 时，导航上的所有 Flexbox 属性都可以工作。这是为什么？

$(document).ready(function(){
  $(".nav").delay(5500).slideDown(500);
});

Answer 1

我无法解决问题，但你可以逃走。

//CSS

.nav {
  background-color: black;
  display: none;
  opacity:0;
}

//jquery

   $(document).ready(function(){  
       $(".nav").slideUp();
       setTimeout(function(){ 
         $(".nav").css('opacity',1).slideDown();
       }, 1000);  
    });