여기에 애니메이션 효과를 추가하려면 어떻게 해야 하나요?
본문
아래 코드 right 부분이 토글되면서 애니메이션을 주고 싶습니다. 어떻게 해야 할까요?
<script>$(function(){ $("#btn").click(function(){ $("#right").toggle(); $("#left").toggleClass("tog"); });});</script>답변 2
어떤 애니메이션이냐 따라 다릅니다. ^^
어떤 애니메이션을 원하시는지 부터 말씀해주셔야 합니다..
본문 통째로 다시 올렸습니다. right div를 토글버튼으로 클릭하면 있었다가 없었다가 하는건데
그게 슬라이드 효과로 됬으면 하네요. 가능하면 left div도 같이 애니메이션 효과가 적용되서
자연스럽게 슬라이드 되도록요. 조언 부탁드립니다.
<!doctype html><html lang="ko">
<head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="MINSUP.KR"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>이런 레이아웃 어떻게 만듭니까?</title>
<script src="../../js/jquery-1.8.3.min.js"></script>
<style>body {margin:0;padding:0}
/* POSITION 이용*/#left {position:relative;margin:0 300px 0 0}#left.tog {margin:0}
#right {position:fixed;top:0;right:0;bottom:0;width:300px;background:#000}/*#right {position:absolute;top:0;right:0;width:300px;height:300px;background:#000}*/
</style></head>
<body>
<div id="left"> 특성은 그림에 써놓은것과 같습니다. 현재는 wrap을 만들어서 wrap에 table속성을 주고 left와 right 각각에 table-cell 속성을 주어서 만들었으나 구버전 ie와 파폭에서 문제가 있어서 다시좀 만드려고 합니다. left는 right의 유무에 따라 가변적으로 가로길이가 100%였다가 100%-300px(right 가로길이) 였다가 하는걸로 right는 자바스크립트로 토글시켜서 있었다가 없었다가 하게 하려고 합니다. right가 left위에 떠서 가리는게 아니라 left가 right만큼 작아졌다 커졋다 하는겁니다. 조언좀 구합니다.</div>
<button type="button" id="btn">버튼</button>
<div id="right"></div>
<script>$(function(){ $("#btn").click(function(){ $("#right").toggle(); $("#left").toggleClass("tog"); });});</script>
</body></html>
답변을 작성하시기 전에 로그인 해주세요.
