작성일자
카테고리 Javascript/JQuery
이전글 에서 하나의 버튼으로 두가지 기능을 하는 토글효과를 이용한 슬라이딩 메뉴를 알아보았는데 이것은 html요소를 위 아래로만 감추거나 나타나게 하고 좌우로 슬라이딩효과를 주려면 제이쿼리의 animate 기능을 이용합니다. 화면 밖에 감추었다가 버튼을 클릭하면 화면 안으로 나타나게 하는 슬라이딩 애니메이션 효과를 알아봅니다.

<head>

<title>Untitled Document</title>
 
<style type="text/css">
#effect { width: 240px; height: 135px;  position: fixed;  left:-200px; top:45%;}
// 제이쿼리 타겟 대상으로 이 div에 대해서 애니메이션합니다. 포지션은 고정위치로 스크롤해도 정지되어있습니다. left는 화면 좌측끝을 의미하고 -200픽셀이니까 화면 밖으로 나가 있습니다. top은 화면 상단으로부터 45%에 위치합니다.

               #content { width:200px; float:left; }
//버튼과 좌우로 나란히 있게 하기 위해 float를 사용합니다.
#button { float:left; position:relative; width:40px; height:30px; background:url(button1.gif); text-indent:-9999px; cursor:pointer;}
//html코드에서 div="button" 에 버튼이미지를 배경으로 넣고 텍스트는 안보이게 합니다. 이부분의 이미지는 처음 로딩시 화면에 나오게 하고 클릭하면 사라지기 때문에 제이쿼리 코드에 별도로 이미지를 삽입합니다.


버튼이미지는 두개를 사용하는데 하나는 열리고 다른 하나는 닫을때 나타나는 이미지입니다.
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript"> 
//구글의 제이쿼리 라이브러리를 사용하면 서버에 제이쿼리를 별도로 설치할 필요가 없습니다. 
 
jQuery(function() {
jQuery( "#button" ).toggle(
function() {
jQuery( "#effect" ).animate({left: 0}, 500 ); //애니메이션시켜서 위치를 -200에서 0으로 이동합니다. 500은 애니메이션 되는 시간으로 밀리(mili)초로 0.5초입니다. 
jQuery( "#button" ).css({"background":"url(button2.gif)"}); //버튼 div에 스타일을 주는 방법으로 배경이미지를 삽입합니다. 이곳을 클릭하면 닫는 이미지로 전환됩니다.
},
function() {
jQuery( "#effect" ).animate({left: '-200px'}, 500 ); //이곳을 클릭하면 다시 원위치로 갑니다.
jQuery( "#button" ).css({"background":"url(button1.gif)"}); // 열리는 버튼이미지로 전환됩니다.
}
);
});
</script> 
</head>
 
<body>


<div id="effect">
   <div id="content">
이글이 도움이 되셨다면 추천↑ 부탁드립니다. 
</div>
<div id="button">
<p><a href="#">Toggle</a></p>
</div>

</div>

</body>
</html>

에디터에 코드를 입력하고 웹브라우저에 실행하면 아래 데모링크처럼 잘 되는데 블로그에서는 열리고 닫는 두개의 이미지가 나타나지 않아서 하나의 이미지를 사용했습니다. 

slideleft2.html

buttons.zip



데모링크

링크


오른쪽에 배치할 경우의 파일은 아래를 사용하면 됩니다. 


저작자 표시 비영리 변경 금지
신고
wlfltksdidvk

정말 감사합니다 ! .. 다만..ㅠㅠ 버튼이미지는 어떻게 해야하나요..
이미지가 안나옵니다 ㅠㅠㅠ

BlogIcon 베누시안

버튼 이미지 업데이트했습니다.같은 폴더에 넣고 하면 됩니다.

wlfltksdidvk

저는 레이아웃.html 파일에 소스(?)를 넣고 gif파일은 그 html이 있는 파일 바로앞에 올려놨는데..
이미지파일은 보이지가 않네요;
그리고 위 소스를 추가하면 캐시파일 재생성 ,설정, 페이지 수정 이게 한쪽으로 몰리는 현상이..ㄷㄷ

wlfltksdidvk

한쪽으로 쏠리는 문제는 페이지에 이름이 content여서 한쪽으로 쏠렸던거같습니다.
다만.. 이미지는 같은폴더에 있음에도 불구하고 보이지 않는데 어떻게 하면 좋을까요;

BlogIcon 베누시안

xe에 대해서 공부할 수 있는 곳이 있으니 참고하세요. http://www.xeschool.com/xe/

또한 CSS에 대해서 잘 아셔야 웹페이지 만드는데 쉬워집니다.

wlfltksdidvk

음 아쉽네요.. 나름 감사해서 인사쓸려고 댓글 달앗는데 차단하셔서 ; ^^;
그래두 감사인사는 하고 싶어서 글 남깁니다.

BlogIcon 베누시안

댓글 다는데 차단되든가요? 영어로 쓴다든가하면 글쓰기가 안된답니다. 저도 시험해 봤는데 영어로 쓰니까 차단되더군요.

BlogIcon epqk

http://jqueryab.tistory.com/1 이 글쓸려구 티스토리 블로그까지 만들었네요;ㅎ
몇가지 제가 몰랐다가 알았던 내용 두개추가한건데 여기 추가해주셨으면 좋겠네요 :)
많은 도움주셔서 감사합니다

BlogIcon 베누시안

안녕하세요. 어떤 내용을 추가하는건지.. 자세히좀..

BlogIcon epqk

저 위 댓굴 썻던 wlfltksdidvk구요 url(주소)이부분하고 div 아래 주석처리로 설명글 달앗어요 혹시 저같이 찾는분이 있을까봐:)

BlogIcon 베누시안

아.. 그랬군요. 누구신가 했더니..제가 쓴 글은 어차피 대략적인 내용이구 세부적인 내용 수정은 CSS로 하면 됩니다. br태그를 사용하면 두칸이나 내려가므로 픽셀단위로 조정하기 위해서는 margin-top이나 padding-top을 쓰면 픽셀단위로 조정이 가능합니다. 저의 경우는 뷰온버튼 바로 밑에 위치시키기 위해서 그런 것이고요. 그리고 주소는 url다음에 오는 것이 상대주소인데 님의 경우처럼 절대주소를 사용해도 됩니다. 절대주소는 내 서버가 아닌 다른 서버의 내용을 인용할때 사용하죠. 내 서버에 있는 것을 인용하고자 할때는 굳이 길게 http까지 안넣어도 됩니다. 이미지가 루트의 images폴더에 있다면 images/button.gif로 하면 되구요.. 댓글 감사합니다.

하하

martian님 글은 매우 유용하고 잘되네요 :) 배우고 갑니다~~
epqk 님 좀 ㅎㅎ <br> 이라니요.css 를 더 배우셔야 할듯요

BlogIcon 베누시안

안녕하세요. 반갑습니다. 좋은 평가 감사드립니다.

BlogIcon epqk

꼭 css를 쓰란법은 없으니까 적어놓은겁니다 ^_^

비밀댓글입니다

BlogIcon 베누시안

어떻게 따라다니는지 어떤 상황에서 그런지 설명 부탁합니다.

비밀댓글입니다

wlfltksdidvk

제이쿼리에 대한 다양한 예제강좌(?)좀 많이해주셨으면 좋겠어요~
제이쿼리를 이용한 팝업(모달팝업)이라든지..
시간 괜찮으시다면 포토샵글보다 제이쿼리글을...:)

BlogIcon 베누시안

현재로서는 포토샵을 찾는 분들이 많기 때문에 어느정도 글이 많아지면 제이쿼리 글을 올립니다. 아직 포토샵 관련해서 반도 못 올렸네요.

비밀댓글입니다

BlogIcon 베누시안

단편적으로 어느 한가지만 아실려고 하지말고 책을 하나 사서 공부하세요. 전반적인 기초를 아셔야 좋습니다. 단순히 궁금증을 해결하는 것 보다는 기초부터 배우세요. 제이쿼리는 자바스크립트가 기본이기 때문에 자바스크립트를 우선 시작하는 것이 좋습니다. 기초부분에 다 나와있는 것들입니다. 또한 CSS도 같이 해야됩니다. 자바스크립트나 제이쿼리가 단순이 그분야만 다룰 수 없기때문에 CSS가 포함됩니다. 단편적인 지식은 지금 안다고 해도 얼마지나지 않아 까먹습니다.

비밀댓글입니다

BlogIcon 베누시안

인터넷 서점을 둘러 보니 제대로된 CSS책이 없네요. 그런 상황에서 아직 사용하기도 힘든 CSS3에 대한 책이 많군요. 저는 외서로 공부해서 책을 추천하기는 힘들지만 다행이 Head First 번역서가 있네요. 헤드퍼스트는 그림이 많고 잡다한 설명이 있어서 별로지만 초보자분들에게는 좋으리라 생각됩니다. 책을 보면서 직접 코딩하고 기억하기 어려운 것은 항상 메모장을 열고 메모하세요. 나중에 메모만 봐도 어떤 내용인지 기록도하다보면 나중에 참고할때 찾기 쉽습니다. 메모가 배우는데 가장 빠른 길입니다. 메모 안하면 나중에 찾기도 어렵습니다.

비밀댓글입니다

BlogIcon 베누시안

추가한 파일을 참고하세요.

비밀댓글입니다

비밀댓글입니다

개나리

소스감사합니다. 웹페이지에 적용해보니 위치도 맞게 들어갔는데 하단 스크롤바가 생기네요..#effect에 overflow:hidden도 추가해봤는데..변함이 없네요..근데 이소스를 HTML상 아무데나 위치시켜도 상관없는건가요?

BlogIcon 베누시안

위 스타일시트에는 하단 스크롤바가 만들어질만한 코드가 없는데요. 원래 사이트의 스타일시트를 점검해보세요. 그리고 배치는 스타일시트로 하면 됩니다.

stella

제가 현재 만들고 있는 홈페이지 jquery-1.9.1.min버전인데요...
이 안에서는 올려주신 움직임이 제대로 작동하지 않아서요. 혹시 어떻게 수정해야 사용할 수 있을까요? 제가 파일명 조정하는 수준이고, 함수를 스스로 작성해서 고치는 수준이 아니라서...
급한대로 제이쿼리 책을 사서 토글 부분을 봐도, 어떻게 응용해야 할지 잘 모르겠네요. ^^
딱 제가 생각하는 움직임이라서 꼭 부탁드립니다~

BlogIcon 베누시안

제이쿼리 플러그인은 기반으로 사용하는 제이쿼리 버전이 다르면 제대로 나오지 않을 수 있으니 이전 버전을 사용하세요.

초보개발자

안녕하십니까. 소스보고 열심히 따라해봤습니다.혹시 궁굼하게 있어서 여쭤봅니다.
jquery-3.2.0.min.js 버전을 사용하고 있는데 3.2.0을 쓰니깐 안됩니다. 혹시 3.2.0에 맞는건 없을까요?
답변 제발 부탁드립니다 좋은하루 보내십쇼!

티스토리 툴바