[송규남의 IT다이어리] 제이쿼리(jQuery) 다섯번째 이야기
노용철
view : 625
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 5
안녕하세요. 중앙HTA의 송규남 강사입니다.
지난 시간에 이어 jQuery 다섯번째 강좌를 시작해보겠습니다.
이번 시간에는 jQuery 에서의 이펙트 효과에 대해서 알아보겠습니다.
이펙트 효과를 이용하면 다이나믹한 웹페이지 또는 다양한 애니메이션 효과를 줄 수 있으며
jQuery 의 강력한 기능중의 하나입니다.
Effects 메뉴를 선택하면 다양한 이펙트를 줄 수 있는 메소드들이 나옵니다.
사용방법 설명을 위한 간단한 예제를 만들어 보겠습니다.
html 페이지를 하나 추가하여 아래처럼 코드를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready<function(){
$("#box1").hide(); //div 숨기기
$("#btnshow").click(function(){
$("#box1").show(); //div 보이기
});
});
</script>
</head>
<body>
<input type="button" value="show" id="btnshow" />
<div id="box1" style="margin-top:10px;width:480px;height:300px,background-image:url(images/back.png)">
</div>
</body>
</html>
처음에는 이미지가 보이질 않습니다.
$(document).ready(function(){
$("#box1").hide(); --> 이문장 때문이죠...
show버튼을 누르면 누르자마자 바로 이미지가 보여집니다.
$("box1").show(); --> 이문장은 id속성이 box1인 요소를 화면에 보이게 합니다.
하지만 조금 재미가 없군요...
버튼을 누를때 펼쳐지듯이 보이게 하고 싶으면 show 메소드안에 숫자를 넣어줍니다.
$("#box1").show(1000); --> 괄호안의 숫자는 1초동안 펼쳐지게 보이려면 1000을 넣어야 합니다.
0.5초 보이려면 500을 넣어야겠죠?
숫자를 넣고 실행해보면 몇자 적지 않았는데 멋있는 펼침효과가 나타나는 것을 확인 할 수 있습니다.
버튼을 하나 더 추가하고 숨김 작업을 애니메이션 효과처럼 닫히게 해보죠.
아래처럼 버튼을 눌렀을때 숨김을 하는 코드를 추가합니다.
<script type="text/javascript">
$(document).ready(function(){
$("#box1").hide(); //div 숨기기
$("#btnshow").click(function(){
$("#box1").show(1000);
});
$("#btnhide").click(function(){
$("#box1").hide(1000);
});
</script>
</head>
<body>
<input type="button" vlaue="show" id="btnshow" />
<input type="button" vlaue="hide" id="btnshow" />
hide 버튼을 클릭하면 이미지가 펼쳐진것을 닫으면서 사라지죠?
hide(1000)와 show(1000) 메소드를 아래의 Effect로 바꾸어서 실해해 보세요.
아까와는 다른 효과로 이미지가 사라지고 보여질 것입니다.
메소드 이름에 toggle이 붙은것은 보였다 숨겼다 작업을 번갈아 가면서 합니다.
아래처럼 button을 하나 추가한 후 아래와 같은 이벤트 핸들러를 만들어 보세요.
<input type="button" vlaue="toggle" id="btntoggle" />
[코드]
$("#btntoggle").click(function(){
$("#box1").fadetoggle(100));
});
slidetoggle() 메소드로 바꾸어서 실행해 보면 역시나 번갈아 가면서 보였다 숨겼다 합니다.
하지만 fadetoggle()과는 조금 다른 효과를 보이죠?
이펙트가 다 적용되고 나서 해야 할 일이 있다면 메소드에 function을 아래처럼 추가합니다.
[버튼추가]
<input type="button" value="이펙트종료" id="btnend" />
$("#btnend").click(function(){
$("#box1").fadein(1000,function(){
$(this).append("<h1>애니메이션이 완료되었습니다.<h1>");
});
});
CSS는 아래처럼 작성했습니다.
<style>
h1{color:white;opacity:0.5;text-shadow:3px 3px 3px #aaa}
</style>
btnend 버튼을 클릭하면 box1이 화면에 보이는 작업을 1초동안 수행하고 작업이 완료되면 자동으로 function이 수행됩니다.
hide 버튼을 누른 후 이펙트 종료버튼을 누르면 이미지가 서서히 보여지면서 그 작업이 완료되면 애니메이션이 완료되었습니다.
라는 문자열이 이미지 위에 보이게 됩니다.
이펙트가 종료된 후에 해야 할 일이 있다면 function에서 해당 작업을 작성해 주면 됩니다.
아래처럼 이미지가 다 보여진 후 이미지 각도를 살짝 바꿔 볼까요??
$("#btnend").click(function(){
$("#box1").fadein(1000,function(){
$(this).append("<h1>애니메이션이 완료되었습니다.<h1>")'
$(this).css("transform","rotate(5deg)") ;//html5의 // CSS3로 각도바꾸기
});
});
이번 강좌에서는 Effect에 대한 부분을 알아봤습니다.
그럼 이번 강좌는 여기서 마무리 하며 다음 jQuery 강좌에서 찾아 뵙도록 하겠습니다.
<저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
