4.2

课堂笔记；

（一）实现侧边栏的动态效果，开始侧边栏是不显示的，点击侧边栏菜单显示侧边栏，并呈现遮罩效果。点击遮罩，隐藏侧边栏。

1、在html中建立遮罩的div

[html]  view plain  copy

1. <div class="mask"></div>  

[css]  view plain  copy

1. /*点击侧边栏时，变暗的效果*/  
2. .mask{  
3.     display: none;  
4.     position: fixed;  
5.     top:0;  
6.     bottom:0;  
7.     left:0;  
8.     right:0;  
9.     background: rgba(0,0,0,0.3);  
10. }  
11. #sidebar{  
12.     position: fixed;  
13.     top:0;  
14.     /*right:0;*/  
15.     right:-300px;/*侧边栏隐藏在屏幕右边*/  
16.     bottom:0;  
17.     width:300px;  
18.     background: #333;  
19.     padding:20px 0;  
20.     transition:right 0.5s;  
21. }  

3、js

[javascript]  view plain  copy

1. ;$(function () {  
2.     'use strict';  
3.     var sidebar = $('#sidebar'), /*选择侧栏*/  
4.         mask = $('.mask'),  
5.         sidebar_trigger = $('#sidebar_trigger');  
6.   
7.     function showSideBar() {  
8.         mask.fadeIn();  
9.         sidebar.css('right', 0);  
10.     }  
11.     function hideSideBar() {  
12.         mask.fadeOut();  
13.         sidebar.css('right', -sidebar.width());  
14.     }  
15.   
16.     sidebar_trigger.on('click',showSideBar);  
17.     mask.on('click', hideSideBar);  
18. })  

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

（二 ）侧边栏的滑动效果还有另外的实现方式

1、css

[css]  view plain  copy

1. /*侧栏*/  
2. #sidebar{  
3.     position: fixed;  
4.     top:0;  
5.     /*right:-300px;*/  
6.     right:0;  
7.     -webkit-transform: translate(300px, 0);  
8.     -moz-transform: translate(300px, 0);  
9.     -ms-transform: translate(300px, 0);  
10.     -o-transform: translate(300px, 0);  
11.     transform: translate(300px, 0);  
12.     bottom:0;  
13.     width:300px;  
14.     background: #333;  
15.     padding:20px 0;  
16.     transition:right 0.5s;  
17. }  

translate(x,y) ：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。

2、js

[javascript]  view plain  copy

1. function showSideBar() {//显示侧栏  
2.         mask.fadeIn();//显示mask  
3.         sidebar.css('transform','translate(0,0)');//调整侧栏相关的css  
4.     }  
5.     function hideSideBar() {//隐藏侧栏  
6.         mask.fadeOut();//隐藏mask  
7.         sidebar.css('transform', 'translate('+sidebar.width()+'px'+',0)');//调整侧栏相关的css  
8.     }