如何在点击滑动菜单时降低网站的不透明度?
How can I lower the opacity of website when slide-menu is clicked?
我有一个运行良好的幻灯片菜单,但我希望它在点击时降低网站其他部分的不透明度,我错过了什么?这是幻灯片菜单js
$(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);
}
});
});
.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;
}
<div class="slideout-menu">
<h3>Last Week<a href="#" class="slideout-menu-toggle">×</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>
谢谢
你可以使用$(selector). fadeto (duration,opacity)或者你可以在你的css中准备一个class/id,包含所需的不透明度,然后使用$(selector).attr('class','newClass')
相关文章:
- 如何更改文本框控件的不透明度值
- 在js中访问元素时不透明度和样式未定义,但在css中定义
- Greenstock不透明度动画从0到1再返回
- 如何在html画布上替换ByImage()而不是drawImage()(忽略不透明度)
- 设置1400个Raphael.js对象的不透明度动画会影响动画性能
- 选中复选框时降低父级的不透明度
- 更改alphaMap不透明度不会更新(THRE.JS R76)
- 如何在页面向下滚动时获得图像以获得不透明度
- 在Materialize设计中删除转盘图像的不透明度
- 如何删除javascript中的不透明度
- 如何使用javascript在rgba中获取不透明度参数
- 如何在悬停时更改高图的不透明度
- 更改整个类的不透明度元素
- 具有不透明度和类似模态行为的向导
- 为什么大型网站不;I don’我更喜欢本地存储而不是cookie
- 选择选项可更改图像的不透明度
- 使用媒体查询设置背景图像的不透明度
- 在画布上绘制不透明度(行中的点)javascript
- 引导:仅更改特定模态的模态背景不透明度
- 如何在点击滑动菜单时降低网站的不透明度?