jquer实现导航栏展开隐藏缩放效果

很久没用juqey写过了，很简单的一个功能，还浪费了一点时间。提醒一下：（以后调用函数一定要先验证一下，找buff的时候就不会浪费那么多时间了）

实现效果：代码

 1   var cary = true
 2         $('.close-left-btn').click(function () {
 3             if(cary){
 4                 closeMainLeft() ;
 5                 cary = !cary
 6                 console.log(1);
 7             } else {
 8                 openMainLeft();
 9                 cary = !cary
10                 console.log(2);
11             }
12         });
13     }
14     var winW = $(window).width();
15     var winH = $(window).height();
16 
17     function resizeSize(){
18         $('.top-tabs').width(winW - 190 + 'px');
19         $('.sidebar-content').height(winH - 70 + 'px');
20         $('.right-content').height(winH - 126 + 'px');
21     }
22 
23 function closeMainLeft() {
24         $('.sidebar-wrap').animate({width: '60px',});
25         $('.close-left-btn').addClass('close-left-btn-out');
26         $('.right-content').css({'margin-left': '60px'});
27         $('.top-tabs').css({width: winW + 'px', left:'60px'});
28     }
29 
30     function openMainLeft() {
31         $('.sidebar-wrap').animate({width:'190px'});
32         $('.close-left-btn').removeClass('close-left-btn-out');
33         $('.right-content').css({'margin-left':'190px'});
34         $('.top-tabs').css({width: winW - 190 + 'px', left:'190px'});
35     }

posted on 2018-10-24 17:23 carryH5 阅读(773) 评论(0) 编辑收藏举报