여기에 애니메이션 효과를 추가하려면 어떻게 해야 하나요? 채택완료
헐크매니아
8년 전
조회 2,284
아래 코드 right 부분이 토글되면서 애니메이션을 주고 싶습니다. 어떻게 해야 할까요?
</p><table style="text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; orphans: 2; widows: 2; -webkit-text-stroke-width: 0px;"><tbody><tr><td class="line-content"><span class="html-tag"><script></span></td></tr><tr><td class="line-number" value="38"></td><td class="line-content">$(function(){</td></tr><tr><td class="line-number" value="39"></td><td class="line-content"> $("#btn").click(function(){</td></tr><tr><td class="line-number" value="40"></td><td class="line-content"> $("#right").toggle();</td></tr><tr><td class="line-number" value="41"></td><td class="line-content"> $("#left").toggleClass("tog");</td></tr><tr><td class="line-number" value="42"></td><td class="line-content"> });</td></tr><tr><td class="line-number" value="43"></td><td class="line-content">});</td></tr><tr><td class="line-number" value="44"></td><td class="line-content"><span class="html-tag"></script></span></td></tr></tbody></table><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
헐크매니아
8년 전
댓글을 작성하려면 로그인이 필요합니다.
8년 전
</p><table style="text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; orphans: 2; widows: 2; -webkit-text-stroke-width: 0px;"><tbody><tr><td class="line-number" value="1"></td><td class="line-content"><span class="html-doctype"><!doctype html></span></td></tr><tr><td class="line-number" value="2"></td><td class="line-content"><span class="html-tag"><html <span class="html-attribute-name">lang</span>="<span class="html-attribute-value">ko</span>"></span></td></tr><tr><td class="line-number" value="3"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="4"></td><td class="line-content"><span class="html-tag"><head></span></td></tr><tr><td class="line-number" value="5"></td><td class="line-content"> <span class="html-tag"><meta <span class="html-attribute-name">charset</span>="<span class="html-attribute-value">UTF-8</span>"></span></td></tr><tr><td class="line-number" value="6"></td><td class="line-content"> <span class="html-tag"><meta <span class="html-attribute-name">name</span>="<span class="html-attribute-value">Generator</span>" <span class="html-attribute-name">content</span>="<span class="html-attribute-value">EditPlus®</span>"></span></td></tr><tr><td class="line-number" value="7"></td><td class="line-content"> <span class="html-tag"><meta <span class="html-attribute-name">name</span>="<span class="html-attribute-value">Author</span>" <span class="html-attribute-name">content</span>="<span class="html-attribute-value">MINSUP.KR</span>"></span></td></tr><tr><td class="line-number" value="8"></td><td class="line-content"> <span class="html-tag"><meta <span class="html-attribute-name">name</span>="<span class="html-attribute-value">Keywords</span>" <span class="html-attribute-name">content</span>=""></span></td></tr><tr><td class="line-number" value="9"></td><td class="line-content"> <span class="html-tag"><meta <span class="html-attribute-name">name</span>="<span class="html-attribute-value">Description</span>" <span class="html-attribute-name">content</span>=""></span></td></tr><tr><td class="line-number" value="10"></td><td class="line-content"> <span class="html-tag"><title></span>이런 레이아웃 어떻게 만듭니까?<span class="html-tag"></title></span></td></tr><tr><td class="line-number" value="11"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="12"></td><td class="line-content"><span class="html-tag"><script <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" href="<a href="http://minsup.kr/js/jquery-1.8.3.min.js" target="_blank" rel="noopener noreferrer">http://minsup.kr/js/jquery-1.8.3.min.js</a>" target="_blank">../../js/jquery-1.8.3.min.js</a>"></span><span class="html-tag"></script></span></td></tr><tr><td class="line-number" value="13"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="14"></td><td class="line-content"><span class="html-tag"><style></span></td></tr><tr><td class="line-number" value="15"></td><td class="line-content">body {margin:0;padding:0}</td></tr><tr><td class="line-number" value="16"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="17"></td><td class="line-content">/* POSITION 이용*/</td></tr><tr><td class="line-number" value="18"></td><td class="line-content">#left {position:relative;margin:0 300px 0 0}</td></tr><tr><td class="line-number" value="19"></td><td class="line-content">#left.tog {margin:0}</td></tr><tr><td class="line-number" value="20"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="21"></td><td class="line-content">#right {position:fixed;top:0;right:0;bottom:0;width:300px;background:#000}</td></tr><tr><td class="line-number" value="22"></td><td class="line-content">/*#right {position:absolute;top:0;right:0;width:300px;height:300px;background:#000}*/</td></tr><tr><td class="line-number" value="23"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="24"></td><td class="line-content"><span class="html-tag"></style></span></td></tr><tr><td class="line-number" value="25"></td><td class="line-content"><span class="html-tag"></head></span></td></tr><tr><td class="line-number" value="26"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="27"></td><td class="line-content"><span class="html-tag"><body></span></td></tr><tr><td class="line-number" value="28"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="29"></td><td class="line-content"><span class="html-tag"><div <span class="html-attribute-name">id</span>="<span class="html-attribute-value">left</span>"></span></td></tr><tr><td class="line-number" value="30"></td><td class="line-content"> 특성은 그림에 써놓은것과 같습니다. 현재는 wrap을 만들어서 wrap에 table속성을 주고 left와 right 각각에 table-cell 속성을 주어서 만들었으나 구버전 ie와 파폭에서 문제가 있어서 다시좀 만드려고 합니다. left는 right의 유무에 따라 가변적으로 가로길이가 100%였다가 100%-300px(right 가로길이) 였다가 하는걸로 right는 자바스크립트로 토글시켜서 있었다가 없었다가 하게 하려고 합니다. right가 left위에 떠서 가리는게 아니라 left가 right만큼 작아졌다 커졋다 하는겁니다. 조언좀 구합니다.</td></tr><tr><td class="line-number" value="31"></td><td class="line-content"><span class="html-tag"></div></span></td></tr><tr><td class="line-number" value="32"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="33"></td><td class="line-content"><span class="html-tag"><button <span class="html-attribute-name">type</span>="<span class="html-attribute-value">button</span>" <span class="html-attribute-name">id</span>="<span class="html-attribute-value">btn</span>"></span>버튼<span class="html-tag"></button></span></td></tr><tr><td class="line-number" value="34"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="35"></td><td class="line-content"><span class="html-tag"><div <span class="html-attribute-name">id</span>="<span class="html-attribute-value">right</span>"></span><span class="html-tag"></div></span></td></tr><tr><td class="line-number" value="36"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="37"></td><td class="line-content"><span class="html-tag"><script></span></td></tr><tr><td class="line-number" value="38"></td><td class="line-content">$(function(){</td></tr><tr><td class="line-number" value="39"></td><td class="line-content"> $("#btn").click(function(){</td></tr><tr><td class="line-number" value="40"></td><td class="line-content"> $("#right").toggle();</td></tr><tr><td class="line-number" value="41"></td><td class="line-content"> $("#left").toggleClass("tog");</td></tr><tr><td class="line-number" value="42"></td><td class="line-content"> });</td></tr><tr><td class="line-number" value="43"></td><td class="line-content">});</td></tr><tr><td class="line-number" value="44"></td><td class="line-content"><span class="html-tag"></script></span></td></tr><tr><td class="line-number" value="45"></td><td class="line-content">
</td></tr><tr><td class="line-number" value="46"></td><td class="line-content"><span class="html-tag"></body></span></td></tr><tr><td class="line-number" value="47"></td><td class="line-content"><span class="html-tag"></html></span></td></tr><tr><td class="line-number" value="48"></td><td class="line-content"><span class="html-end-of-file"></span></td></tr></tbody></table><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그게 슬라이드 효과로 됬으면 하네요. 가능하면 left div도 같이 애니메이션 효과가 적용되서
자연스럽게 슬라이드 되도록요. 조언 부탁드립니다.