javascript - 下拉列表不在 jQuery 中为 .slideDown() 设置动画

Question

我有一个带有嵌套的导航列表，我想在悬停时向下(和向上)展开。 .slideUp() 函数完美运行，但 .slideDown() 根本没有动画效果。

$('.dropdownLink').hover(function(e) {
  e.preventDefault();
  $('#dropdown').slideDown(900, function() {
    $('#dropdown').css("visibility", "visible");
  });
}, function() {
  $('#dropdown').slideUp(900, function() {
    $('#dropdown').css("visibility", "hidden");
  });
});

#dropdown {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding-top: 10px;
  visibility: hidden;
}

#dropdown li {
  margin-top: 13px;
}

#dropdown li a {
  font-size: 0.9em;
  padding: 3px 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
  <ul>
    <li><a class="link" href="#">Home</a></li>
    <li><a class="link dropdownLink" href="#">Models <i class="fas fa-caret-down"></i></a>
      <ul id="dropdown">
        <li><a class="link" href="#">Model S</a></li>
        <li><a class="link" href="#">Model 3</a></li>
        <li><a class="link" href="#">Model X</a></li>
        <li><a class="link" href="#">Cybertruck</a></li>
        <li><a class="link" href="#">Roadster</a></li>
        <li><a class="link" href="#">Energy</a></li>
      </ul>
    </li>
    <li><a class="link" href="#">About</a></li>
    <li><a class="link" href="#">Order</a></li>
    <li><a class="link" href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

无需玩visibility .只需添加 display: none到你的 CSS，jQuery 会处理剩下的事情。

此外，不要添加 hover链接的事件监听器。一旦您将鼠标移向子菜单，它就会消失，因为您的光标将不再悬停在链接上。相反，您可以将其添加到父级 <li> .

最后，正如@Taplar 在下面提到的，要避免在快速进出时出现动画堆叠，请使用 .stop()。 :

$('.dropdownContainer').hover(function(e) { // <---
  e.preventDefault();
  $('#dropdown').stop().slideDown(900); // <---
}, function() {
  $('#dropdown').stop().slideUp(900);   // <---
});

#dropdown {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding-top: 10px;
  display: none; /* <------------------------- */
}

#dropdown li {
  margin-top: 13px;
}

#dropdown li a {
  font-size: 0.9em;
  padding: 3px 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
  <ul>
    <li><a class="link" href="#">Home</a></li>
    <!--         vvvvvvvvv            -->
    <li class="dropdownContainer"><a class="link dropdownLink" href="#">Models <i class="fas fa-caret-down"></i></a>
      <ul id="dropdown">
        <li><a class="link" href="#">Model S</a></li>
        <li><a class="link" href="#">Model 3</a></li>
        <li><a class="link" href="#">Model X</a></li>
        <li><a class="link" href="#">Cybertruck</a></li>
        <li><a class="link" href="#">Roadster</a></li>
        <li><a class="link" href="#">Energy</a></li>
      </ul>
    </li>
    <li><a class="link" href="#">About</a></li>
    <li><a class="link" href="#">Order</a></li>
    <li><a class="link" href="#">Contact</a></li>
  </ul>
</nav>