반응형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $("#leftSlideBtn").click(function(){ var LIcon = $("#inair-leftIcon"); var RIcon = $("#inair-rightIcon"); if(LIcon.css("display") == "inline"){ /*왼족으로 밀고 싶을 때*/ $("#inair-leftIcon").css("display", "none"); $("#inair-rightIcon").css("display", "inline"); $("#leftSlideBtnDiv").animate({left: "-260"}, 350); $("#ia-article").css("position","relative"); $("#ia-article").animate({left: "-240"}, 350); }else{ /*오른쪽으로 보이게 하고 싶을 때 */ $("#inair-leftIcon").css("display", "inline"); $("#inair-rightIcon").css("display", "none"); $("#leftSlideBtnDiv").animate({left: "0"}, 350); $("#ia-article").css("position","static"); $("#ia-article").animate({left: "0"}, 350); } $("#ia-aside-submenu").animate({width:"toggle"}, 350); }); | cs |
1 2 3 4 5 6 7 8 9 10 | #leftSlideBtn{ width: 10px; height: 10px; /* border: 1px solid #72abe6; */ padding: 8px 1.3px; border-radius-right: 3px; background: #359ed0; color: white; border-radius: 0px 5px 5px 0px; } | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div id="ia-body" class="container-fluid noPadding"> <!-- aside --> <aside id="ia-aside"> <div id="ia-aside-submenu" class=" hiddenScroll"> <div class="tab-content ia-aside-tab"></div> </div> </aside> <div id="leftSlideBtnDiv" style="top:50%; position: relative; z-index: 1;"> <span id="leftSlideBtn" > <i class="fas fa-chevron-left" id="inair-leftIcon" style="display:inline;"></i> <i class="fas fa-chevron-right" id="inair-rightIcon" style="display:none;"></i> </span> </div> <!-- article --> <!-- 타이틀 breadcrumb--> <article id="ia-article" class="container-fluid ia-article-tab"> <div id="ia-article-head"> ... | cs |
반응형
'Programming Language > Javascript' 카테고리의 다른 글
(스크랩)스코프와 클로저 (0) | 2019.01.11 |
---|---|
글자 byte 계산 및 자르기 (0) | 2018.12.19 |
(스크랩)[자바스크립트] LocalStorage, SessionStorage 클라이언트에 정보 저장 (0) | 2018.12.07 |
[Javascript] 자바스크립트 시간 타이머 표시 (0) | 2018.12.05 |
자바스크립트 문자 숫자 분리/ 배열 생성 (0) | 2018.11.29 |