.slideDown() 은 매칭되는 요소에 대해서 슬라이드 모션으로 나타낸다.
.slideUp() 은 매칭되는 요소에 대해서 슬라이드 모션으로 감춘다.
문법
.slideDown( [ duration ], [ callback ] ) → version 1.0 이후
.slideDown( [ duration ], [ easing ], [ callback ] ) → version 1.4.3 이후
.slideUp( [ duration ], [ callback ] ) → version 1.0 이후
.slideUp( [ duration ], [ easing ], [ callback ] ) → version 1.4.3 이후
duration : 문자나 숫자로 애니메이션이 얼마나 실행할 것인지 결정한다.
문자는 fast, slow 형태가 있고 밀리초로 따지면 200, 600 밀리초로 나타낼 수 있으며 매개변수값
이
없거나 다른문자가 들어가면 디폴트 400 밀리초를 사용한다.
callback : 애니메이션이 완료되면 호출되는 함수
사용예
slideDown()
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
</body>
</html>
slideUp()
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#3d9a44; margin:3px; width:80px;
height:40px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
</script>
</body>
</html> 
