Javascript 如何使用jQuery切换div的背景色不透明度？

我正在使用jQuery打开和关闭汉堡包菜单。“无颜色”和“颜色”类添加或删除背景

当前，当该操作运行时，在类切换时背景会突然填充。我希望它淡入/淡出。我试过“fadeTo”和“animate”，但没能让它们按需要工作

如何使用jQuery切换div的背景色不透明度

$( '#navButton' ).click(function() {
   $( '.navigation' ).slideToggle( 'slow', function() {
      $( '.no-colour' ).toggleClass( 'colour' );
      $( '.fa-bars' ).toggleClass( 'fa-times' ); 
      // the above is not needed for this example it just swaps the menu icon with a 'x'
   });
});

CSS:

---

是的，过渡应该做到：

.no-colour {
   background-color: rgba(250, 250, 250, 0.1);
   -webkit-transition: background-color 0.7s ease-out;
   -moz-transition: background-color 0.7s ease-out;
   -ms-transition: background-color 0.7s ease-out;
   -o-transition: background-color 0.7s ease-out;
   transition: background-color 0.7s ease-out;
}

.colour {
   background-color: rgba(250, 250, 250, 1);
}

---

只需添加一个css

转换

，它就会为您淡入淡出。在下面的代码片段中观察它的工作情况

$（“#导航按钮”）。单击（函数（）{
$（'.navigation'）.toggleClass（'color'）.toggleClass（'no-color'））
});
.color{
背景色：rgba（2502502501）；
过渡：2s；
}
没有颜色{
背景色：rgba（2502502500.1）；
过渡：2s；
}

按
LKJSDFLSDF
将转换添加到CSS典型的“供应商前缀”。供应商前缀的存在并不意味着它们都受支持。例如，
-ms transition
不存在。@这并不意味着css会失败，只是保护
transition
在旧浏览器上工作。顺便说一句，如果您使用一些
less
或
sass
编译器，您调用的
供应商前缀将自动添加。所以我想练习也没那么糟糕。你没抓住重点。是的，CSS不会失败，但这是一种不好的做法，因为您用不必要的属性使代码膨胀。虽然
-webkit transition
有效，但Microsoft前缀对应项甚至不存在。尝试自动刷新
transition
，您会发现。
.no-colour {
   background-color: rgba(250, 250, 250, 0.1);
   -webkit-transition: background-color 0.7s ease-out;
   -moz-transition: background-color 0.7s ease-out;
   -ms-transition: background-color 0.7s ease-out;
   -o-transition: background-color 0.7s ease-out;
   transition: background-color 0.7s ease-out;
}

.colour {
   background-color: rgba(250, 250, 250, 1);
}