기본효과
show() 문서객체를 크게 하며 보여줌
hide() 문서객체를 작게 하면 사라짐
toggle() show() hide() 번갈아 실행
slideDown() 슬라이드 효과와 함께 보여줌
slideUp() 슬라이드 효과와 함께 사라지게 함
slideToggle() slideDown() slideUp() 번갈아 실행
fadeIn() 선명하게 보여줌
fadeOut() 흐리게 하며 사라지게 함
fadeToggle() fadeIn() fadeOut() 번갈아 실행
사용방법으로는
$(선택자).method();
$(선택자).method(speed);
$(선택자).method(speed,callback);
$(선택자).method(speed,easing,callback);
speed 속도 - slow,normal,fast
callback 효과완료후 실행할 함수
easing 애니메이션 - linear swing
- 소스 -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery-1.7.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery-1.7.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1').click(function(){
$(this).next().toggle('slow',function(){
alert('효과');
});
});
});
</script>
<script type = "text/javascript">
$(document).ready(function(){
//slow를 3초로 지정
jQuery.fx.speeds.slow = 3000;
//hide()
$("#hide1").click(function(){
$("#hidediv1").hide();
});
//hide 인자 값으로 speed, callback함수 지정
$("#hide2").click(function(){
$("#hidediv2").hide("slow",function(){
alert("경고: speed 값을 주면 천천히 사라집니다.");
});
});
//show()
$("#show1").click(function(){
$("#showdiv1").show();
});
//show 인자 값으로 speed, callback함수 지정
$("#show2").click(function(){
$("#showdiv2").show("slow",function(){
alert("경고: speed 값을 주면 천천히 보여집니다.");
});
});
//toggle 코드
$("#toggle1").click(function(){
$("#togglediv1").toggle();
});
//toggle 인자 값으로 speed, callback함수 지정
$("#toggle2").click(function(){
$("#togglediv2").toggle("slow",function(){
alert("경고: speed 값을 주면 천천히 보여집니다.");
});
});
});
</script>
</head>
<body>
<h1>열고 닫기</h1>
<div>
<h1>제목1</h1>
<p>내용입니다.</p>
</div>
<h1>열고 닫기</h1>
<div>
<h1>제목2</h1>
<p>내용입니다.</p>
</div>
<h1>열고 닫기</h1>
<div>
<h1>제목3</h1>
<p>내용입니다.</p>
</div>
<h1> hide()예제 </h1>
<button id = "hide1"> hide() </button>
<div id = "hidediv1" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
이 부분이 사라집니다.
</div>
<h1> hide(speed, callback)예제 </h1>
<button id = "hide2"> hide(speed, callback) </button>
<div id = "hidediv2" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
이 부분이 애니메이션 표현에 의해 사라집니다.
</div>
<h1> show()예제 </h1>
<button id = "show1"> show() </button>
<div id = "showdiv1" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
이 부분이 보여집니다.
</div>
<h1> show(speed, callback)예제 </h1>
<button id = "show2"> show(speed, callback) </button>
<div id = "showdiv2" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
이 부분이 애니메이션 표현에 의해 보여집니다.
</div>
<h1> toggle()예제 </h1>
<button id = "toggle1"> toggle() </button>
<div id = "togglediv1" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
이 부분이 toggle 됩니다.
</div>
<h1> toggle(speed, callback)예제 </h1>
<button id = "toggle2"> toggle(speed, callback) </button>
<div id = "togglediv2" sttyle = "display:block; border:1px solid #cccccc; width:300px; height:200px;">
이 부분이 애니메이션 표현에 의해 toggle 됩니다.
</div>
</body>
</html>
'IT > ETC' 카테고리의 다른 글
| [ETC] HTML 페이지 이동(리다이렉트Redirect) (0) | 2012.07.01 |
|---|---|
| [ETC] FLV Playback 콤포넌트 (0) | 2012.06.02 |
| [ETC] swf 파일에서 Adobe Flash Player 보안 창이 뜨는 경우 해결법 (0) | 2012.05.31 |
| [ETC] Ctrl+Insert,Shift+Delete,Shift+Insert (0) | 2012.03.03 |
| [ETC] UltraEdit 사용법 및 단축키 (0) | 2011.11.30 |