javascript - jQuery fade()不褪色

我有一个this jsbin原型，有两个菜单项，单击时显示一个子菜单：
子菜单的可见性由fadeIn()和fadeOut控制。但是，不透明度不会设置动画。它只是等待指定的时间，然后完全显示或完全隐藏。不褪色。
代码很简单，所以我很困惑。。。

(function(){
  var activeMenu = null;
  var animation = {
    duration: 250,
    queue: true
  };
  $(document).click(function(){
    if(activeMenu) {
      $(activeMenu).removeClass('active-nav-item');
      $(activeMenu).find('.nav-group').fadeOut(animation);
      activeMenu = null;
    }
  });
  $.fn.simpleMenu = function() {
    $(this).children('.nav-item:has(.nav-group)').each(function(i,e) {
      $(e).click(function() {
        if(activeMenu) {
          $(activeMenu).removeClass('active-nav-item');
          $(activeMenu).find('.nav-group').fadeOut(animation);
        }
        if(activeMenu !== e) {
          activeMenu = e;
          $(activeMenu).addClass('active-nav-item');
          $(activeMenu).find('.nav-group').fadeIn(animation);
          return false;
        }
      });
    });
  };
})();

$('.global-nav').simpleMenu();
$('.meta-nav').simpleMenu();

最佳答案

我不是百分之百确定，但我认为这是你的问题所在：

* {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

在移除此项而不更改任何其他内容时，它将按预期工作。
http://jsbin.com/ADINIDI/7