여기에 애니메이션 효과를 추가하려면 어떻게 해야 하나요?
본문
아래 코드 right 부분이 토글되면서 애니메이션을 주고 싶습니다. 어떻게 해야 할까요?
<script>$(function(){ $("#btn").click(function(){ $("#right").toggle(); $("#left").toggleClass("tog"); });});</script>
답변 2
어떤 애니메이션이냐 따라 다릅니다. ^^
어떤 애니메이션을 원하시는지 부터 말씀해주셔야 합니다..
<!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>
답변을 작성하시기 전에 로그인 해주세요.