Jquery 使用字体切换的淡入淡出切换类

我有一个菜单切换，当点击时，将字体从汉堡图标类更改为十字。 我想要一些动画，一个简单的淡入淡出将做的切换类。因为它切换了类，所以淡入淡出的效果与我添加类时的效果不同，正如您在下面假设的那样

$( ".menu-toggle" ).click(function() {
    $(this).find('i').toggleClass('fa-bars fa-times', 1000);
});

如何在下面的代码中添加一个简单的淡入淡出

$( ".menu-toggle" ).click(function() {
    $(this).find('i').toggleClass('fa-bars fa-times');
});

---

试试这个？它不使用令人敬畏的字体，但使用CSS可以提供相同的效果

Html:

JS

---

@ScottEldo请确保包含供应商前缀，否则它将无法在移动设备上使用。

<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>

.hamburger {
  width: 30px;
  height: 20px;
  position: relative;
  margin: auto;
}
.hamburger .line {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  transition: all 200ms;
}
.hamburger .line:nth-child(1) {
  top: 0;
}
.hamburger .line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger .line:nth-child(3) {
  bottom: 0;
}
.hamburger.close .line:nth-child(1), .hamburger.close .line:nth-child(2)          {
  top: 0;
  transform: translateY(9px) rotate(45deg);
}
.hamburger.close .line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

body {
  margin: 20px;
}

$('.hamburger').click(function(e) {
  $(this).toggleClass('close');
});