jquery 在 3.5 毫秒内切换类

Question

为什么这个功能不能正常使用？一切正常，除了 toggleClass 在 3.5 毫秒内切换。它可以正确切换，但不会出现动画。

下面的这段代码粗略地说明了一个更复杂的导航，但思路是一样的。

$('ul#menu-main-menu li:nth-child(2) a').click(function() {
      $('ul#menu-main-menu').toggleClass('nav-border', 350);
  });

ul#menu-main-menu {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #ddd;
}

li {
  display: inline-block;
  margin: 0 10px 0 0;
  cursor: pointer;
}

.nav-border {
  border-radius: 20px 20px 0 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script>
<ul id='menu-main-menu'>
  <li>
    <a> First</a>
  </li>
  <li> 
    <a> Second</a>
  </li>
  <li> 
    <a> Third</a>
  </li>
</ul>

谢谢大家

Answer 1

您在使用 jquery ui 吗？只有 jquery ui 版本的 toggleClass 需要持续时间。

http://api.jquery.com/toggleClass/

http://api.jqueryui.com/toggleClass/

Answer 2

您可以使用 css transition 属性。

transition :border-radius 350ms;

完整代码：

$('ul#menu-main-menu li:nth-child(2) a').click(function() {
      $('ul#menu-main-menu').toggleClass('nav-border', 350);
  });

ul#menu-main-menu {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #ddd;
  transition :border-radius 350ms;
}

li {
  display: inline-block;
  margin: 0 10px 0 0;
  cursor: pointer;
}

.nav-border {
  border-radius: 20px 20px 0 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='menu-main-menu'>
  <li>
    <a> First</a>
  </li>
  <li> 
    <a> Second</a>
  </li>
  <li> 
    <a> Third</a>
  </li>
</ul>

jquery 在 3.5 毫秒内切换类

jquery toggleClass over the course of 3.5ms

jquery

toggleclass