검은 부분을 클릭하면 네모가 오른쪽으로 가고,
한번 더 누르면 제자리(왼쪽으로) 움직이는 예제. (미리보기는 없다 ㅋㅋ)
나는 이걸로 메뉴 열고 닫기에 응용할 것이다.
| <html> <head> <style> #container { position:absolute; background-color:#abc; left:50px; width:90px; height:90px; margin:5px; } #menu { position:absolute; background-color:#000000; width:10px; height:90px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="container"> <div id="menu"></div> </div> <script> var menu_flag = true; $("#menu").click(function(){ if (menu_flag) { $("#container").animate({"left": "+=300px"}, "slow"); menu_flag = false; } else { $("#container").animate({"left": "-=300px"}, "slow"); menu_flag = true; } }); </script> </body> </html> |
'개발 > Javascript' 카테고리의 다른 글
| 자바스크립트 함수 형태, 클래스처럼 쓰는 법 (0) | 2013.04.09 |
|---|---|
| jQuery 탭 페이지 만들기 (1) | 2013.04.09 |
| [jQuery] 이미지 서서히 나타나게 하기 (0) | 2012.12.06 |
| JAVA spring 프레임워크로 하는 JqGrid cell 값 수정 (edit) (17) | 2012.09.14 |
| Java와 jqgrid 기초!! (15) | 2012.09.12 |