Question

我正在使用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：

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

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

Answer 1

只需添加一个css transition，它就会淡入淡出。请观看以下代码段中的工作。

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

.colour {
   background-color: rgba(250, 250, 250, 1);
  transition: 2s;
}

.no-colour {
   background-color: rgba(250, 250, 250, 0.1);
  transition: 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navButton">PRESS</div>
  <div class="navigation no-colour">LKJSDFLSDF</div>

Answer 2

是的，过渡应该这样做：

.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);
}

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

2 个答案: