javascript - jquery fade() 不褪色

标签 javascript jquery html css

我有this jsbin原型(prototype),有两个菜单项,点击时显示子菜单:

screenshot of 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();

最佳答案

我不是 100% 确定,但我认为这是你的问题所在:

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

删除此内容并且不更改其他任何内容后,它会按预期工作。

http://jsbin.com/ADINIDI/7

关于javascript - jquery fade() 不褪色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19341377/

相关文章:

php - 无法从数据库获取最近添加的数据

html - 让滚动在子元素上而不是在可调整大小的父元素上

javascript - 返回顶部按钮未正确触发

javascript - 如何在JS中设置div内的值

javascript - 如何通过 vanilla js 更新范围输入 slider 的位置?

javascript - 为什么这个 jquery 代码不起作用

javascript - 自定义有效性至少选择一个复选框jquery

javascript - 默认情况下取消选中复选框

javascript - 如何实现方法链

jquery - 卡住html表中的多列