如何使用jQuery切换div背景色透明度？实现汉堡菜单背景淡入淡出

嘿，我完全懂你的困扰——直接切换类的时候背景色突兀地出现消失，完全没有平滑过渡的质感对吧？你之前尝试fadeTo和animate没达到预期，大概率是因为没找对正确的动画切入点，或者类切换的逻辑和动画冲突了。下面给你两种靠谱的解决方案，你可以根据自己的需求选：

方法一：用CSS过渡配合类切换**（推荐，性能更好）** #

其实最简单的方式是把动画交给CSS处理，只要给目标元素加上过渡属性，切换类的时候就能自动实现淡入淡出。

首先修改你的CSS，给.no-colour和.colour类加上过渡效果，并且用RGBA格式定义背景色（方便控制透明度）：

/* 初始无背景的状态 */
.no-colour {
  background-color: rgba(255, 255, 255, 0); /* 这里换成你想要的背景色，最后一个值是透明度0 */
  transition: background-color 0.6s ease; /* 过渡时长和缓动效果可以自己调 */
}

/* 有背景的状态 */
.colour {
  background-color: rgba(255, 255, 255, 1); /* 透明度设为1 */
}

然后你的JS代码可以保持简洁，只需要在slideToggle完成后切换类就行：

$('#navButton').click(function() {
  $('.navigation').slideToggle('slow', function() {
    $('.no-colour').toggleClass('colour');
  });
});

这种方式的好处是CSS动画比JS动画性能更优，而且代码更简洁，后期维护也方便。

方法二：用jQuery的animate()直接操作透明度 #

如果你更倾向于用JS来控制动画，可以直接通过animate()操作元素背景色的RGBA透明度。不过要注意，jQuery默认不支持直接动画背景色，如果你用的是旧版jQuery，需要引入jquery.color.js插件；新版jQuery已经支持RGBA的动画了。

修改后的JS代码如下：

$('#navButton').click(function() {
  $('.navigation').slideToggle('slow', function() {
    const $target = $('.no-colour');
    if ($target.hasClass('colour')) {
      // 淡出：把透明度降到0，完成后移除类
      $target.animate({ backgroundColor: 'rgba(255, 255, 255, 0)' }, 'slow', function() {
        $(this).removeClass('colour');
      });
    } else {
      // 淡入：先加类，再把透明度升到1
      $target.addClass('colour').animate({ backgroundColor: 'rgba(255, 255, 255, 1)' }, 'slow');
    }
  });
});

记得把代码里的rgba(255,255,255,0)换成你实际需要的背景色值哦。

额外注意点 #

• 如果你的背景是图片而不是纯色，那上面的方法就不适用了。这时候可以给背景单独做一个子元素，只对这个子元素做opacity的过渡动画，避免影响菜单里的文字内容：

  .background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('你的背景图地址');
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  
  .background-layer.colour {
    opacity: 1;
  }
  

  然后JS里切换这个子元素的类就可以了。

内容的提问来源于stack exchange，提问作者crffty