单击幻灯片菜单时，如何降低网站的不透明度？

Question

我有一个效果很好的幻灯片菜单，但我想让它在点击时降低网站其他部分的不透明度，我错过了什么？这是幻灯片菜单js

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.slideout-menu-toggle').on('click', function(event) {
    event.preventDefault();
    // create menu variables
    var slideoutMenu = $('.slideout-menu');
    var slideoutMenuWidth = $('.slideout-menu').width();

    // toggle open class
    slideoutMenu.toggleClass("open");

    // slide menu
    if (slideoutMenu.hasClass("open")) {
      slideoutMenu.animate({
        left: "0px"
      });
    } else {
      slideoutMenu.animate({
        left: -slideoutMenuWidth
      }, 250);
    }

    if (slideoutMenu.hasClass("open")) {
      $('body').animate({
        'margin-left': slideoutMenuWidth
      });
    } else {
      $('body').animate({
        'margin-left': "0px"
      }, 250);
    }
  });
});

＆＃13;

.slideout-menu {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #333;
  z-index: 100;
}
.slideout-menu h3 {
  position: relative;
  padding: 20px 10px;
  color: #999;
  font-size: 1.2em;
  font-weight: 400;
  border-bottom: 0px solid #222;
}
.slideout-menu .slideout-menu-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  background: #222;
  color: #999;
  text-decoration: none;
  vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}
.slideout-menu ul {
  list-style: none;
  font-weight: 300;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
  border-top: 1px solid #454545;
  border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
  text-decoration: none;
}
.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}
.slideout-menu ul li a i {
  position: absolute;
  top: 15px;
  right: 10px;
  opacity: .5;
}

＆＃13;

<div class="slideout-menu">
  <h3>Last Week<a href="#" class="slideout-menu-toggle">&times;</a></h3>
  <center>
    <img border="0px" draggable="false" align="middle" src="img/fbump.png" alt="dundaah_logo" width="220" height="220">
  </center>
  <ul>
    <li>
      <a href="http://dundaah.com/docs/mon.html">Dundaah</a>
    </li>
    <li>
      <a href="http://pics.dundaah.com/docs/mon.html">Pics</a>
    </li>
    <li>
      <a href="http://vidz.dundaah.com/docs/mon.html">Videos</a>
    </li>
    <li>
      <a href="http://music.dundaah.com/docs/mon.html">Music</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢

Answer 1

您可以使用$(selector).fadeTo(duration,opacity)，也可以在css中准备包含所需不透明度的类/ ID，然后使用$(selector).attr('class','newClass')。